@proximus/lavender-mega-dropdown 1.0.0-alpha.1

package/dist/index.js

@@ -0,0 +1,925 @@
+import { PxElement as d, WithFlexAttributes as U, colorValues as g, textalignValues as X, headingValues as Y, fontweightValues as Z, fontsizeValues as V } from "@proximus/lavender-common";
+import "@proximus/lavender-layout";
+const E = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", L = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', ee = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}", T = new CSSStyleSheet(), q = new CSSStyleSheet(), M = new CSSStyleSheet();
+T.replaceSync(E);
+q.replaceSync(L);
+M.replaceSync(ee);
+const te = [
+  "",
+  "default",
+  "secondary",
+  "tertiary",
+  "link",
+  "patch",
+  "patch-info",
+  "patch-black-friday",
+  "patch-eco"
+], z = class z extends d {
+  constructor() {
+    super(T, q, M), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
+    const e = document.createElement(this.nativeName);
+    e.classList.add("btn"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "state",
+      "extended",
+      "loading",
+      "shape",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.querySelectorAll("px-icon");
+    e && e.forEach((t) => {
+      const o = t.getAttribute("size"), r = t.getAttribute("color");
+      t && (t.addEventListener("click", () => {
+        this.$el.focus();
+      }), o || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit"));
+    });
+  }
+  attributeChangedCallback(e, t, o) {
+    if (t !== o)
+      switch (e) {
+        case "variant":
+          this.updateVariant(t, o, te);
+          break;
+        case "state":
+          this.updateState(t, o);
+          break;
+        case "extended":
+          this.updateExtended();
+          break;
+        case "loading":
+          this.updateLoading();
+          break;
+        case "shape":
+          this.updateShape(t, o);
+          break;
+        default:
+          super.attributeChangedCallback(e, t, o);
+          break;
+      }
+  }
+  checkName(e, t) {
+    return !!e.includes(t);
+  }
+  checkClass(e) {
+    if (e.startsWith("patch-")) {
+      const t = e.split(/-(.*)/s);
+      for (const o of t)
+        o != "" && this.$el.classList.toggle(o);
+    } else
+      this.$el.classList.toggle(e);
+  }
+  _toggleClass(e, t) {
+    e !== null && e !== "" && e !== "default" && this.checkClass(e), t !== null && t !== "" && t !== "default" && this.checkClass(t);
+  }
+  updateVariant(e, t, o) {
+    t === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(e, t), this.checkName(o, t) || console.error(`Bad "variant" value for ${this.$el}`);
+  }
+  updateState(e, t) {
+    const o = ["", "default", "success", "error"];
+    this._toggleClass(e, t), this.checkName(o, t) || console.error(`Bad "sate" value for ${this.$el}`);
+  }
+  updateExtended() {
+    this.$el.classList.toggle("extended");
+  }
+  updateLoading() {
+    const e = this.querySelector("px-spinner");
+    e && (e.getAttribute("size") || e.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
+  }
+  updateShape(e, t) {
+    const o = [
+      "",
+      "default",
+      "bottom-right",
+      "bottom-left",
+      "alternative"
+    ];
+    this._toggleClass(e, t), this.checkName(o, t) || console.error(`Bad "shape" value for ${this.$el}`);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(e) {
+    this.setAttribute("state", e);
+  }
+  get extended() {
+    return this.getAttribute("extended");
+  }
+  set extended(e) {
+    this.setAttribute("extended", e);
+  }
+  get loading() {
+    return this.getAttribute("loading");
+  }
+  set loading(e) {
+    this.setAttribute("loading", e);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(e) {
+    this.setAttribute("shape", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+};
+z.nativeName = "button";
+let c = z;
+customElements.get("px-button") || customElements.define("px-button", c);
+class oe extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["name", "src", "type", "format"];
+  }
+  connectedCallback() {
+    if (document.querySelectorAll(
+      `px-icon-set[name="${this.getAttribute("name")}"]`
+    ).length > 1 && (console.warn(
+      "Only one <px-icon-set> component is allowed, self removing"
+    ), this.remove()), this.getAttribute("type") === "font") {
+      const t = document.createElement("style");
+      t.setAttribute("type", "text/css"), t.setAttribute("data-name", this.getAttribute("name")), t.textContent = `
+@font-face {
+  font-family: 'lavender';
+  src:
+    url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+      `, document.head.appendChild(t);
+    }
+  }
+  disconnectedCallback() {
+    const e = document.querySelector(
+      `style[data-name="${this.getAttribute("name")}"]`
+    );
+    e && e.remove();
+  }
+}
+customElements.get("px-icon-set") || customElements.define("px-icon-set", oe);
+const re = ["2xs", "xs", "s", "m", "l", "xl", "2xl"], ne = [
+  "name",
+  "size",
+  "color",
+  "aria-label",
+  "inverted",
+  "from"
+];
+class R extends U {
+  static get observedAttributes() {
+    return [...super.observedAttributes, ...ne];
+  }
+  constructor(...e) {
+    var t;
+    super(...e), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
+  }
+  attributeChangedCallback(e, t, o) {
+    if (t !== o)
+      switch (e) {
+        case "name":
+          this.updateName(t, o);
+          break;
+        case "size":
+          this.updateAttribute(e, t, o, re);
+          break;
+        case "color":
+          this.updateAttribute(e, t, o, g);
+          break;
+        case "aria-label":
+          if (!this.internals)
+            return;
+          o ? this.internals.ariaHidden = "false" : this.internals.ariaHidden = "true";
+          break;
+      }
+  }
+  updateAttribute(e, t, o, r) {
+    t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(r, o) || console.error(
+      `${o} is not an allowed ${e} value for ${this.$el}`
+    );
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(e) {
+    this.setAttribute("name", e);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(e) {
+    this.setAttribute("color", e);
+  }
+  get arialabel() {
+    return this.getAttribute("aria-label");
+  }
+  set arialabel(e) {
+    this.setAttribute("aria-label", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  get from() {
+    return this.getAttribute("from");
+  }
+  set from(e) {
+    this.setAttribute("from", e);
+  }
+}
+const B = ":host{line-height:1;display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-primary-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-color-icon-primary-default)}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i{color:var(--px-color-icon-primary-inverted)}:host([inverted]) svg{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}", D = new CSSStyleSheet();
+D.replaceSync(B);
+class ie extends R {
+  constructor() {
+    super(D), this.template = () => `<svg>
+  <use xlink:href="#icon-${this.name}"></use>
+</svg>`, this.shadowRoot.innerHTML = this.template();
+  }
+  connectedCallback() {
+    const e = document.querySelectorAll("px-icon-set");
+    e || console.log("<px-icon-set> component not found");
+    for (const t of e) {
+      if (!t.getAttribute("name") || !t.getAttribute("src")) {
+        console.error("Icon name or src not found");
+        continue;
+      }
+      t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.src = t.getAttribute("src"), this.$el.firstElementChild.setAttribute(
+        "xlink:href",
+        `${this.src}#icon-${this.name}`
+      ));
+    }
+  }
+  updateName(e, t) {
+    this.src && this.$el.firstElementChild.setAttribute(
+      "xlink:href",
+      `${this.src}#icon-${t}`
+    );
+  }
+  get $el() {
+    return this.shadowRoot.querySelector("svg");
+  }
+}
+customElements.get("px-icon") || customElements.define("px-icon", ie);
+const ae = '.lavender-3g_tablet:before{content:""}.lavender-accessories:before{content:""}.lavender-account:before{content:""}.lavender-activate:before{content:""}.lavender-ai:before{content:""}.lavender-air_plane:before{content:""}.lavender-alarm:before{content:""}.lavender-answers:before{content:""}.lavender-antenna:before{content:""}.lavender-applications:before{content:""}.lavender-arrow_down:before{content:""}.lavender-arrow_left:before{content:""}.lavender-arrow_right:before{content:""}.lavender-arrow_up:before{content:""}.lavender-back_camera:before{content:""}.lavender-bbox_off:before{content:""}.lavender-batterie:before{content:""}.lavender-best_seller:before{content:""}.lavender-bell_circle:before{content:""}.lavender-best_seller_2:before{content:""}.lavender-best_seller_14:before{content:""}.lavender-bbox_on:before{content:""}.lavender-beta_02:before{content:""}.lavender-beta:before{content:""}.lavender-belgique_ok:before{content:""}.lavender-bicycle:before{content:""}.lavender-bill:before{content:""}.lavender-bill_member:before{content:""}.lavender-birthday_cake:before{content:""}.lavender-blindness:before{content:""}.lavender-bookmark:before{content:""}.lavender-broken_links:before{content:""}.lavender-burger_menu:before{content:""}.lavender-bus:before{content:""}.lavender-bug:before{content:""}.lavender-budget_manager:before{content:""}.lavender-cable:before{content:""}.lavender-caddy:before{content:""}.lavender-cadenas_cloud:before{content:""}.lavender-calendar:before{content:""}.lavender-call_from_abroad:before{content:""}.lavender-call_transfert:before{content:""}.lavender-calls:before{content:""}.lavender-camera:before{content:""}.lavender-calls_1:before{content:""}.lavender-calls_from_belgium:before{content:""}.lavender-car:before{content:""}.lavender-car_crash:before{content:""}.lavender-card:before{content:""}.lavender-care:before{content:""}.lavender-cash_back:before{content:""}.lavender-checkmark:before{content:""}.lavender-checkmark_branding:before{content:""}.lavender-chevron_down:before{content:""}.lavender-chevron_up:before{content:""}.lavender-circular_economy:before{content:""}.lavender-clock:before{content:""}.lavender-cloud:before{content:""}.lavender-cloud_ict:before{content:""}.lavender-cloud_iot_1:before{content:""}.lavender-cloud_iot_2:before{content:""}.lavender-chevron_right:before{content:""}.lavender-cloud_security:before{content:""}.lavender-cloud_network:before{content:""}.lavender-chevron_left:before{content:""}.lavender-collaboration:before{content:""}.lavender-congratulation_box:before{content:""}.lavender-connection_error:before{content:""}.lavender-community:before{content:""}.lavender-connected_devices:before{content:""}.lavender-contact:before{content:""}.lavender-crash:before{content:""}.lavender-copy_paste:before{content:""}.lavender-cookie:before{content:""}.lavender-contest:before{content:""}.lavender-cross:before{content:""}.lavender-cross_circle:before{content:""}.lavender-connectivity:before{content:""}.lavender-current_location:before{content:""}.lavender-connection_manager:before{content:""}.lavender-daily_comute:before{content:""}.lavender-daily_rooming:before{content:""}.lavender-data:before{content:""}.lavender-dance:before{content:""}.lavender-dashboard:before{content:""}.lavender-desktop:before{content:""}.lavender-delivery:before{content:""}.lavender-data_center:before{content:""}.lavender-easy:before{content:""}.lavender-download:before{content:""}.lavender-easy_1:before{content:""}.lavender-daily_rooming_02:before{content:""}.lavender-direct_assist:before{content:""}.lavender-edit:before{content:""}.lavender-electricity:before{content:""}.lavender-energy:before{content:""}.lavender-entertainmant_full:before{content:""}.lavender-entertainment:before{content:""}.lavender-exclamation_mark:before{content:""}.lavender-eco:before{content:""}.lavender-exclamation_filled:before{content:""}.lavender-exhibition_screen:before{content:""}.lavender-export:before{content:""}.lavender-eye:before{content:""}.lavender-eye_close:before{content:""}.lavender-family:before{content:""}.lavender-faq:before{content:""}.lavender-favorite:before{content:""}.lavender-favorite_unselected:before{content:""}.lavender-feedback:before{content:""}.lavender-filter:before{content:""}.lavender-fixed_connection:before{content:""}.lavender-fiber:before{content:""}.lavender-fire_wood:before{content:""}.lavender-flexibility04:before{content:""}.lavender-flexibility05:before{content:""}.lavender-flexibility03:before{content:""}.lavender-flexibility02:before{content:""}.lavender-flexible_delivery:before{content:""}.lavender-flexibility01:before{content:""}.lavender-fixed_phone:before{content:""}.lavender-football:before{content:""}.lavender-forum:before{content:""}.lavender-free_delivery:before{content:""}.lavender-free_service:before{content:""}.lavender-frequently_questions:before{content:""}.lavender-fuel:before{content:""}.lavender-front_camera:before{content:""}.lavender-galerry_02:before{content:""}.lavender-galerry:before{content:""}.lavender-games:before{content:""}.lavender-gaz:before{content:""}.lavender-gift:before{content:""}.lavender-government:before{content:""}.lavender-gps:before{content:""}.lavender-handicap:before{content:""}.lavender-handle:before{content:""}.lavender-heat_pump:before{content:""}.lavender-guitar:before{content:""}.lavender-home:before{content:""}.lavender-home_added_value:before{content:""}.lavender-hub:before{content:""}.lavender-home_wifi:before{content:""}.lavender-icon_advantage_pig:before{content:""}.lavender-ict:before{content:""}.lavender-ict_networking:before{content:""}.lavender-incoming_calls:before{content:""}.lavender-infinity:before{content:""}.lavender-information_box:before{content:""}.lavender-internet_mobile:before{content:""}.lavender-information:before{content:""}.lavender-internet_laptop:before{content:""}.lavender-internet_tablet:before{content:""}.lavender-invoice_insight_adv:before{content:""}.lavender-international:before{content:""}.lavender-layers:before{content:""}.lavender-internet:before{content:""}.lavender-licence_plate_managment:before{content:""}.lavender-inscription:before{content:""}.lavender-licence_plate_managment02:before{content:""}.lavender-innovation:before{content:""}.lavender-light_bulb:before{content:""}.lavender-links:before{content:""}.lavender-location:before{content:""}.lavender-login:before{content:""}.lavender-login_open:before{content:""}.lavender-logout:before{content:""}.lavender-magnify:before{content:""}.lavender-map:before{content:""}.lavender-markets:before{content:""}.lavender-metro:before{content:""}.lavender-microphone:before{content:""}.lavender-micro:before{content:""}.lavender-mental_deficiency:before{content:""}.lavender-minus_circle:before{content:""}.lavender-minus:before{content:""}.lavender-minutes_1600_01:before{content:""}.lavender-micro_sim_card:before{content:""}.lavender-messaging:before{content:""}.lavender-mobile:before{content:""}.lavender-minutes_1600_02:before{content:""}.lavender-mobile_coverage:before{content:""}.lavender-mobile_1:before{content:""}.lavender-mobile_touches:before{content:""}.lavender-mobility_insurance:before{content:""}.lavender-monitoring:before{content:""}.lavender-mood_happy:before{content:""}.lavender-mood_joy:before{content:""}.lavender-mood_neutral:before{content:""}.lavender-mood_unhappy:before{content:""}.lavender-move_sticker:before{content:""}.lavender-no_wifi:before{content:""}.lavender-no_playing:before{content:""}.lavender-number2:before{content:""}.lavender-number3:before{content:""}.lavender-number1:before{content:""}.lavender-norton_security_1:before{content:""}.lavender-mood_very_bad:before{content:""}.lavender-music:before{content:""}.lavender-norton_security:before{content:""}.lavender-natural_gas:before{content:""}.lavender-number4:before{content:""}.lavender-number5:before{content:""}.lavender-number6:before{content:""}.lavender-number7:before{content:""}.lavender-number8:before{content:""}.lavender-number9:before{content:""}.lavender-number10:before{content:""}.lavender-on_app:before{content:""}.lavender-on_off_switch:before{content:""}.lavender-on_web:before{content:""}.lavender-one_click:before{content:""}.lavender-outcoming_call:before{content:""}.lavender-options:before{content:""}.lavender-overview:before{content:""}.lavender-pack:before{content:""}.lavender-pack_off:before{content:""}.lavender-paperclip:before{content:""}.lavender-parking:before{content:""}.lavender-picture:before{content:""}.lavender-pin:before{content:""}.lavender-places:before{content:""}.lavender-play:before{content:""}.lavender-plus:before{content:""}.lavender-plus_circle:before{content:""}.lavender-positioning:before{content:""}.lavender-power:before{content:""}.lavender-presence_home:before{content:""}.lavender-prime:before{content:""}.lavender-print:before{content:""}.lavender-processor:before{content:""}.lavender-products:before{content:""}.lavender-qr_code:before{content:""}.lavender-qr:before{content:""}.lavender-reducer:before{content:""}.lavender-refresh:before{content:""}.lavender-reload:before{content:""}.lavender-relaunch:before{content:""}.lavender-recycling:before{content:""}.lavender-remote:before{content:""}.lavender-repair_device:before{content:""}.lavender-raccording_flat:before{content:""}.lavender-ready_to_use:before{content:""}.lavender-question_mark:before{content:""}.lavender-replay36:before{content:""}.lavender-requests_appointments_and_order:before{content:""}.lavender-reset:before{content:""}.lavender-roaming_belgium:before{content:""}.lavender-roadwork:before{content:""}.lavender-roaming:before{content:""}.lavender-settings:before{content:""}.lavender-serveur:before{content:""}.lavender-settings_full:before{content:""}.lavender-restaurant:before{content:""}.lavender-shopmag:before{content:""}.lavender-secure_paiement:before{content:""}.lavender-sim_card:before{content:""}.lavender-share:before{content:""}.lavender-search:before{content:""}.lavender-smartphone1:before{content:""}.lavender-smartphone2:before{content:""}.lavender-smartphone3:before{content:""}.lavender-smartphone4:before{content:""}.lavender-smartphone4g:before{content:""}.lavender-smartphone5:before{content:""}.lavender-smartphone6:before{content:""}.lavender-solar_panel:before{content:""}.lavender-solar_pump:before{content:""}.lavender-sondage:before{content:""}.lavender-sound_alert:before{content:""}.lavender-sound_on:before{content:""}.lavender-sound_off:before{content:""}.lavender-stop_watch:before{content:""}.lavender-speedtest_dl:before{content:""}.lavender-speed:before{content:""}.lavender-surf_gsm:before{content:""}.lavender-sustainability:before{content:""}.lavender-speedtest_ul:before{content:""}.lavender-switch:before{content:""}.lavender-succes:before{content:""}.lavender-subscription_1:before{content:""}.lavender-tablet:before{content:""}.lavender-tailor:before{content:""}.lavender-subscription:before{content:""}.lavender-target_blank:before{content:""}.lavender-threedots_horizontal02:before{content:""}.lavender-terms_and_conditions:before{content:""}.lavender-tractor:before{content:""}.lavender-toucscreens:before{content:""}.lavender-threedots_vertical02:before{content:""}.lavender-train:before{content:""}.lavender-traffic_jam:before{content:""}.lavender-tram:before{content:""}.lavender-trash:before{content:""}.lavender-tv:before{content:""}.lavender-under_construction:before{content:""}.lavender-upload:before{content:""}.lavender-usage:before{content:""}.lavender-view360_02:before{content:""}.lavender-view360:before{content:""}.lavender-view360_01:before{content:""}.lavender-videoscope:before{content:""}.lavender-wifi_warning:before{content:""}.lavender-wireless_hub:before{content:""}.lavender-wrench:before{content:""}.lavender-wifi_ok:before{content:""}.lavender-water:before{content:""}.lavender-walking:before{content:""}.lavender-watch:before{content:""}.lavender-voucher:before{content:""}', N = new CSSStyleSheet(), H = new CSSStyleSheet();
+N.replaceSync(ae);
+H.replaceSync(B);
+class se extends R {
+  constructor() {
+    super(N, H), this.template = () => "<i></i>", this.shadowRoot.innerHTML = this.template();
+  }
+  updateName(e, t) {
+    this.$el.classList.remove(`lavender-${e}`), t && this.$el.classList.add(`lavender-${t}`);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector("i");
+  }
+}
+customElements.define("px-icon-f", se);
+const le = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}", I = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.font-size-xs{font-size:var(--px-text-size-xs-tablet)}.font-size-s{font-size:var(--px-text-size-s-tablet)}.font-size-base{font-size:var(--px-text-size-base-tablet)}.font-size-m{font-size:var(--px-text-size-m-tablet)}.font-size-l{font-size:var(--px-text-size-l-tablet)}.font-size-xl{font-size:var(--px-text-size-xl-tablet)}.font-size-2xl{font-size:var(--px-text-size-2xl-tablet)}.font-size-3xl{font-size:var(--px-text-size-3xl-tablet)}.font-size-4xl{font-size:var(--px-text-size-4xl-tablet)}.font-size-5xl{font-size:var(--px-text-size-5xl-tablet)}.font-size-6xl{font-size:var(--px-text-size-6xl-tablet)}.font-size-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.font-size-xs{font-size:var(--px-text-size-xs-desktop)}.font-size-s{font-size:var(--px-text-size-s-desktop)}.font-size-base{font-size:var(--px-text-size-base-desktop)}.font-size-m{font-size:var(--px-text-size-m-desktop)}.font-size-l{font-size:var(--px-text-size-l-desktop)}.font-size-xl{font-size:var(--px-text-size-xl-desktop)}.font-size-2xl{font-size:var(--px-text-size-2xl-desktop)}.font-size-3xl{font-size:var(--px-text-size-3xl-desktop)}.font-size-4xl{font-size:var(--px-text-size-4xl-desktop)}.font-size-5xl{font-size:var(--px-text-size-5xl-desktop)}.font-size-6xl{font-size:var(--px-text-size-6xl-desktop)}.font-size-7xl{font-size:var(--px-text-size-7xl-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)}", P = new CSSStyleSheet();
+P.replaceSync(le);
+const j = new CSSStyleSheet();
+j.replaceSync(I);
+class s extends d {
+  template() {
+    return "<slot></slot>";
+  }
+  constructor(e) {
+    super(P, j);
+    const t = document.createElement(e);
+    t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "text-align",
+      "text-align--mobile",
+      "text-align--tablet",
+      "text-align--laptop",
+      "text-align--desktop",
+      "inverted"
+    ];
+  }
+  attributeChangedCallback(e, t, o) {
+    if (t !== o)
+      switch (e) {
+        case "variant":
+          this.updateAttribute(e, t, o, Y);
+          break;
+        case "color":
+          this.updateColor(t, o, g);
+          break;
+        case "text-align":
+        case "text-align--mobile":
+        case "text-align--tablet":
+        case "text-align--laptop":
+        case "text-align--desktop":
+          this.updateTextAlign(e, t, o, X);
+          break;
+        default:
+          super.attributeChangedCallback(e, t, o);
+          break;
+      }
+  }
+  toggleClass(e, t) {
+    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`);
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  updateAttribute(e, t, o, r) {
+    this.checkName(r, o) ? this.toggleClass(t, o) : console.error(`Bad "${e}" value for`, this.$el);
+  }
+  updateColor(e, t, o) {
+    if (!this.checkName(o, t)) {
+      console.error("Bad color value for", this.$el);
+      return;
+    }
+    const r = this.inverted === null ? "default" : "inverted", n = (i) => {
+      i !== null && i !== "" && i !== "default" && this.$el.style.setProperty(
+        `--heading-color-${r}`,
+        `var(--px-color-txt-${i}-${r})`
+      );
+    };
+    n(e), n(t);
+  }
+  updateTextAlign(e, t, o, r) {
+    if (!this.checkName(r, o)) {
+      console.error(`Bad ${e} value for`, this.$el);
+      return;
+    }
+    const n = (i, l) => {
+      l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
+        `--heading-text-align--${i}`,
+        l
+      );
+    };
+    if (e === "text-align")
+      ["mobile", "tablet", "laptop", "desktop"].forEach((i) => {
+        n(i, t), n(i, o);
+      });
+    else {
+      const i = e.split("--")[1];
+      n(i, t), n(i, o);
+    }
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(e) {
+    this.setAttribute("color", e);
+  }
+  get textAlign() {
+    return this.getAttribute("text-align");
+  }
+  set textAlign(e) {
+    this.setAttribute("text-align", e);
+  }
+  get textAlignMobile() {
+    return this.getAttribute("text-align--mobile");
+  }
+  set textAlignMobile(e) {
+    this.setAttribute("text-align--mobile", e);
+  }
+  get textAlignTablet() {
+    return this.getAttribute("text-align--tablet");
+  }
+  set textAlignTablet(e) {
+    this.setAttribute("text-align--tablet", e);
+  }
+  get textAlignLaptop() {
+    return this.getAttribute("text-align--laptop");
+  }
+  set textAlignLaptop(e) {
+    this.setAttribute("text-align--laptop", e);
+  }
+  get textAlignDesktop() {
+    return this.getAttribute("text-align--desktop");
+  }
+  set textAlignDesktop(e) {
+    this.setAttribute("text-align--desktop", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+}
+const y = class y extends s {
+  constructor() {
+    super("h1");
+  }
+};
+y.nativeName = "h1";
+let b = y;
+customElements.define("px-h1", b);
+const k = class k extends s {
+  constructor() {
+    super("h2");
+  }
+};
+k.nativeName = "h2";
+let h = k;
+customElements.define("px-h2", h);
+const _ = class _ extends s {
+  constructor() {
+    super("h3");
+  }
+};
+_.nativeName = "h3";
+let v = _;
+customElements.define("px-h3", v);
+const w = class w extends s {
+  constructor() {
+    super("h4");
+  }
+};
+w.nativeName = "h4";
+let p = w;
+customElements.define("px-h4", p);
+const A = class A extends s {
+  constructor() {
+    super("h5");
+  }
+};
+A.nativeName = "h5";
+let x = A;
+customElements.define("px-h5", x);
+const S = class S extends s {
+  constructor() {
+    super("h6");
+  }
+};
+S.nativeName = "h6";
+let f = S;
+customElements.define("px-h6", f);
+const de = ".separator{--separator-size: var(--px-border-m);--px-separator-color: var(--px-color-border-main-default);--separator-direction-mobile-border-width: var(--separator-size) 0 0;--separator-direction-mobile-width: initial;--separator-direction-mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var(--px-separator-color);border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_horizontal{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}@media only screen and (min-width: 0px) and (max-width: 767px){.separator_direction_horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 768px) and (max-width: 1024px){.separator_direction_horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px) and (max-width: 1440px){.separator_direction_horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator_direction_horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}:host([inverted]) .separator{--px-separator-color: var(--px-color-border-main-inverted)}", F = new CSSStyleSheet();
+F.replaceSync(de);
+const ce = ["", "default", "horizontal", "vertical"], be = ["", "none", "s", "m", "l"], he = [
+  "",
+  "contrasted",
+  "action-hover",
+  "action-active",
+  "none",
+  "success",
+  "error",
+  "warning",
+  "unlimited"
+], $ = class $ extends d {
+  constructor() {
+    super(F);
+    const e = document.createElement(this.nativeName);
+    e.classList.add("separator"), this.shadowRoot.appendChild(e);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction-mobile",
+      "direction-tablet",
+      "direction-laptop",
+      "direction-desktop",
+      "size",
+      "color",
+      "inverted"
+    ];
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  set direction(e) {
+    this.setAttribute("direction", e);
+  }
+  get directionMobile() {
+    return this.getAttribute("direction-mobile");
+  }
+  set directionMobile(e) {
+    this.setAttribute("direction-mobile", e);
+  }
+  get directionTablet() {
+    return this.getAttribute("direction-tablet");
+  }
+  set directionTablet(e) {
+    this.setAttribute("direction-tablet", e);
+  }
+  get directionLaptop() {
+    return this.getAttribute("direction-laptop");
+  }
+  set directionLaptop(e) {
+    this.setAttribute("direction-laptop", e);
+  }
+  get directionDesktop() {
+    return this.getAttribute("direction-desktop");
+  }
+  set directionDesktop(e) {
+    this.setAttribute("direction-desktop", e);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(e) {
+    this.setAttribute("color", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  attributeChangedCallback(e, t, o) {
+    if (t !== o)
+      switch (e) {
+        case "direction":
+        case "direction-mobile":
+        case "direction-tablet":
+        case "direction-laptop":
+        case "direction-desktop":
+          this.updateDirection(e, o);
+          break;
+        case "size":
+          this.updateSize(o, be);
+          break;
+        case "color":
+          this.updateColor(o, he);
+          break;
+        default:
+          super.attributeChangedCallback(e, t, o);
+          break;
+      }
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  updateSize(e, t) {
+    this.checkName(t, e) ? this.$el.style.setProperty(
+      "--separator-size",
+      `var(--px-border-${e})`
+    ) : (console.error("Bad size value for", this.$el), this.$el.style.setProperty("--separator-size", "var(--px-border-m)"));
+  }
+  updateColor(e, t) {
+    this.checkName(t, e) ? this.$el.style.setProperty(
+      "--px-separator-color",
+      `var(--px-color-border-${e}-${this.inverted === null ? "default" : "inverted"})`
+    ) : (console.error("Bad color value for", this.$el), this.$el.style.setProperty(
+      "--px-separator-color",
+      `var(--px-color-border-main-${this.inverted === null ? "default" : "inverted"})`
+    ));
+  }
+  updateDirection(e, t) {
+    if (!this.checkName(ce, t))
+      console.error(`Bad "${e}" value for`, this.$el);
+    else if (e === "direction")
+      this.$el.classList.add(`separator_direction_${t}`);
+    else {
+      const o = this.$el.classList, r = e.split("-")[1];
+      for (let n = 0; n < o.length; n++)
+        o[n].includes(r) ? this.$el.classList.replace(
+          o[n],
+          `separator_direction_${t}--${r}`
+        ) : this.$el.classList.add(
+          `separator_direction_${t}--${r}`
+        );
+    }
+  }
+};
+$.nativeName = "hr";
+let u = $;
+customElements.define("px-separator", u);
+const ve = ":host([hidden]){display:none;padding-block:0}px-container{position:relative;display:flex;flex-direction:column;overflow:auto}@media screen and (max-width: 767px){px-container{height:100vh}}px-container>px-button-icon{position:absolute;top:2rem;right:1rem}@media screen and (max-width: 767px){px-container>px-button-icon{display:none;right:0}}px-hstack{display:none}@media screen and (max-width: 767px){px-hstack{display:block;padding-bottom:2rem}}px-h1{display:none}@media screen and (max-width: 767px){px-h1{display:block;padding-bottom:2rem}}", W = new CSSStyleSheet();
+W.replaceSync(ve);
+class pe extends HTMLElement {
+  constructor() {
+    var e;
+    super(), this.template = `<px-container
+    padding-inline="none"
+    padding-block="l"
+    padding-block-mobile="xl"
+    background-color="container-none"
+  >
+    <px-hstack gap="1rem" align-items="center">
+      <px-button variant="tertiary">
+        <px-icon name="chevron_left" from="lavender"></px-icon>
+        Back to menu
+      </px-button>
+      <px-spacer></px-spacer>
+      <px-button-icon variant="secondary">
+        <px-icon name="cross" from="lavender"></px-icon>
+      </px-button-icon>
+    </px-hstack>
+    <px-h1 variant="title-3xl"></px-h1>
+    <px-button-icon variant="secondary">
+      <px-icon name="cross" from="lavender"></px-icon>
+    </px-button-icon>
+    <px-stack
+      direction-mobile="column"
+      direction="row"
+      gap-mobile="2rem"
+      gap-laptop="1.5rem"
+      gap-tablet="1rem"
+      gap="4rem"
+    >
+      <slot></slot>
+    </px-stack>
+  </px-container>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [W], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "menu");
+  }
+  static get observedAttributes() {
+    return ["hidden", "name"];
+  }
+  connectedCallback() {
+    var t, o;
+    if (this.querySelectorAll("px-mdd-section").length === 0)
+      throw new Error("HeaderPanel must contain at least one MenuSection");
+    this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (r) => {
+      if (r.target.closest("px-button-icon"))
+        this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
+      else if (r.target.closest("px-button")) {
+        const n = new CustomEvent("section-item-click", {
+          bubbles: !0,
+          composed: !0,
+          detail: { for: "__lavender_mobile_menu" }
+        });
+        this.dispatchEvent(n);
+      }
+    }), this.getAttribute("name") === "__lavender_mobile_menu" && (this.$backButton.style.display = "none");
+    const e = this.getAttribute("name") === "__lavender_mobile_menu" ? "Menu" : ((o = (t = this.closest("px-header")) == null ? void 0 : t.querySelector(
+      `px-header-item[for="${this.getAttribute("name")}"]`
+    )) == null ? void 0 : o.innerText) ?? "";
+    this.$title.innerText = e;
+  }
+  attributeChangedCallback(e, t, o) {
+    if (e === "name" && !o)
+      throw new Error("Media Drop Down must have a name attribute");
+    e === "name" && (this.id = o), e === "hidden" && this.internals && (this.internals.ariaHidden = o === "true" || o === "" ? "true" : "false");
+  }
+  get hidden() {
+    return this.hasAttribute("hidden");
+  }
+  set hidden(e) {
+    if (typeof e != "boolean")
+      throw new Error("hidden must be a boolean");
+    e ? (this.internals && (this.internals.ariaHidden = "true"), this.setAttribute("hidden", "")) : (this.internals && (this.internals.ariaHidden = "false"), this.removeAttribute("hidden"));
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(e) {
+    this.setAttribute("name", e);
+  }
+  get $backButton() {
+    return this.shadowRoot.querySelector("px-button");
+  }
+  get $title() {
+    return this.shadowRoot.querySelector("px-h1");
+  }
+}
+customElements.get("px-mdd") || customElements.define("px-mdd", pe);
+const xe = "@media screen and (max-width: 767px){#section-wrapper{background-color:#fff;border-radius:.5rem;padding-inline:1rem}}@media screen and (max-width: 767px){:host{width:100%}}@media screen and (max-width: 767px){{border-bottom:1px solid var(--px-color-bg-container-weak-default)}}@media screen and (max-width: 767px){{border-bottom:none}}@media screen and (max-width: 767px){{background-color:#fff;border-radius:.5rem;padding-inline:1rem;line-height:4rem}}", G = new CSSStyleSheet();
+G.replaceSync(xe);
+class fe extends HTMLElement {
+  constructor() {
+    super(), this.template = `<px-vstack gap="1rem">
+    <px-h1 variant="title-l" color="body" variant-mobile="title-xl">
+      <slot name="title"></slot>
+    </px-h1>
+    <div id="section-wrapper">
+      <px-vstack role="menu" gap="0.5rem" gap-mobile="0">
+        <slot></slot>
+      </px-vstack>
+    </div>
+    <slot name="footer"></slot>
+  </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [G];
+  }
+}
+customElements.get("px-mdd-section") || customElements.define("px-mdd-section", fe);
+const O = new CSSStyleSheet(), J = new CSSStyleSheet(), K = new CSSStyleSheet();
+O.replaceSync(L);
+J.replaceSync(E);
+K.replaceSync(I);
+const ue = [
+  "link",
+  "no-style",
+  "skip-link",
+  "btn-default",
+  "btn-secondary",
+  "btn-tertiary"
+], C = class C extends d {
+  constructor() {
+    super(O, J, K), this.shapeValues = ["", "default", "alternative"], this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
+    const e = document.createElement(this.nativeName);
+    e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "disabled",
+      "variant",
+      "shape",
+      "extended",
+      "inverted",
+      "font-size",
+      "color",
+      "font-weight"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.querySelectorAll("px-icon");
+    e && e.forEach((t) => {
+      const o = t.getAttribute("size"), r = t.getAttribute("color");
+      t && (t.addEventListener("click", () => {
+        this.$el.focus();
+      }), o || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit"));
+    });
+  }
+  attributeChangedCallback(e, t, o) {
+    if (t !== o)
+      switch (e) {
+        case "disabled":
+          this.$el.toggleAttribute("aria-disabled"), o !== null && this.$el.setAttribute("aria-disabled", "true");
+          break;
+        case "variant":
+          this.updateVariant(t, o);
+          break;
+        case "shape":
+          this.updateShape(t, o);
+          break;
+        case "extended":
+          this.$el.classList.toggle(e);
+          break;
+        case "font-size":
+          this.updateTypography(e, t, o, V);
+          break;
+        case "color":
+          this.updateTypography(e, t, o, g);
+          break;
+        case "font-weight":
+          this.updateTypography(e, t, o, Z);
+          break;
+        default:
+          super.attributeChangedCallback(e, t, o);
+          break;
+      }
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  _toggleClassList(e) {
+    if (e.startsWith("btn-")) {
+      const t = e.split("-");
+      for (const o of t)
+        this.$el.classList.toggle(o);
+    } else
+      this.$el.classList.toggle(e);
+  }
+  updateVariant(e, t) {
+    e !== null && e !== "" && e !== "link" && this._toggleClassList(e), t !== null && t !== "" && t !== "link" && this._toggleClassList(t), this.checkName(ue, t) || console.error(`Bad "variant" value for ${this.$el}`);
+  }
+  updateShape(e, t) {
+    e !== null && e !== "" && e !== "default" && this._toggleClassList(e), t !== null && t !== "" && t !== "default" && this._toggleClassList(t), this.checkName(this.shapeValues, t) || console.error(`Bad "shape" value for ${this.$el}`);
+  }
+  updateTypography(e, t, o, r) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${e}-${o}`), this.checkName(r, o) || console.error(`Bad ${e} value for ${this.$el}`);
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(e) {
+    this.setAttribute("disabled", e);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(e) {
+    this.setAttribute("shape", e);
+  }
+  get extended() {
+    return this.getAttribute("extended");
+  }
+  set extended(e) {
+    this.setAttribute("extended", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  get fontsize() {
+    return this.getAttribute("font-size");
+  }
+  set fontsize(e) {
+    this.setAttribute("font-size", e);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(e) {
+    this.setAttribute("color", e);
+  }
+  get fontweight() {
+    return this.getAttribute("font-weight");
+  }
+  set fontweight(e) {
+    this.setAttribute("font-weight", e);
+  }
+};
+C.nativeName = "a";
+let m = C;
+customElements.get("px-a") || customElements.define("px-a", m);
+const me = "@media screen and (min-width: 768px){px-icon{display:none}}a{text-decoration:none;color:inherit}@media screen and (min-width: 767px) and (max-width: 1024px){a{font-size:var(--px-text-size-base-tablet)}}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}@media screen and (max-width: 767px){px-hstack{display:block;padding:1rem 0;background-color:#fff;border-radius:1rem}}", Q = new CSSStyleSheet();
+Q.replaceSync(me);
+class ge extends HTMLElement {
+  constructor() {
+    var e;
+    super(), this.template = `
+    <px-hstack align-items="center">
+      <span><slot></slot></span>
+      <px-spacer></px-spacer>
+      <px-icon name="chevron_right" from="lavender"></px-icon>
+    </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Q], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "menuitem");
+  }
+  static get observedAttributes() {
+    return ["href", "for"];
+  }
+  attributeChangedCallback(e, t, o) {
+    e === "href" && this.$link ? this.$link.href = o : e === "href" && !this.$link && o ? (this.shadowRoot.innerHTML = `<a>${this.template}</a>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0")) : e === "for" && !this.$button && o && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"));
+  }
+  connectedCallback() {
+    this.hasAttribute("href") ? this.$link.href = this.href : this.hasAttribute("for") && this.addEventListener("click", this.handleClick);
+  }
+  handleClick() {
+    const e = new CustomEvent("section-item-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { for: this.getAttribute("for") }
+    });
+    this.dispatchEvent(e);
+  }
+  get href() {
+    return this.getAttribute("href");
+  }
+  set href(e) {
+    this.setAttribute("href", e);
+  }
+  get $link() {
+    return this.shadowRoot.querySelector("a");
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+}
+customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", ge);
+export {
+  fe as MddSection,
+  ge as MddSectionItem,
+  pe as MegaDropDown
+};

package/package.json

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