@proximus/lavender 1.4.11-alpha.9 → 1.4.12-alpha.2

package/dist/lavender.es.js

@@ -2384,8 +2384,8 @@ let Span = _Span;
 if (!customElements.get("px-span")) {
   customElements.define("px-span", Span);
 }
-const actionButtonCss = "button{border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-secondary-default);border:var(--px-size-border-m) solid transparent;width:var(--px-size-l);height:var(--px-size-l)}button:hover{background-color:transparent;border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 48rem){button{border-radius:var(--px-radius-main);width:inherit;height:inherit}}";
-const styles$N = ":host{display:block}:host *{box-sizing:border-box}:host(:not([promoted])){display:none}a,button{display:block;padding:var(--px-padding-xs-mobile);cursor:pointer;border-radius:var(--px-radius-main);text-decoration:none;color:var(--px-color-text-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}a px-span,button px-span{font-size:var(--px-text-size-label-s-mobile)}a:hover,button:hover{background-color:var(--px-color-background-container-secondary-default)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (min-width: 48rem){a,button{padding:var(--px-padding-xs-tablet) var(--px-padding-2xs-tablet);min-width:65px}a px-span,button px-span{font-size:var(--px-text-size-label-s-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:host(:not([promoted])){display:block}}@media only screen and (min-width: 64.0625rem){a{padding:var(--px-padding-xs-laptop) var(--px-padding-2xs-laptop)}a px-span{font-size:var(--px-text-size-label-s-laptop)}a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625rem){a{padding:var(--px-padding-xs-desktop) var(--px-padding-2xs-desktop)}a px-span{font-size:var(--px-text-size-label-s-desktop)}a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
+const actionButtonCss = "button{border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-secondary-default);width:var(--px-size-l);height:var(--px-size-l)}button:hover{background-color:transparent;border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 48rem){button{border-radius:var(--px-radius-main);width:inherit;height:inherit}}";
+const styles$N = ":host{display:block}:host *{box-sizing:border-box}:host(:not([promoted])){display:none}a,button{display:block;padding:var(--px-padding-xs-mobile);cursor:pointer;border-radius:var(--px-radius-main);text-decoration:none;color:var(--px-color-text-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}a px-span,button px-span{font-size:var(--px-text-size-label-s-mobile);line-height:var(--px-line-height-ratio-s)}a:hover,button:hover{background-color:var(--px-color-background-container-secondary-default)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (min-width: 48rem){a,button{padding:var(--px-padding-xs-tablet);min-width:65px}a px-span,button px-span{font-size:var(--px-text-size-label-s-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:host(:not([promoted])){display:block}}@media only screen and (min-width: 64.0625rem){a,button{padding:var(--px-padding-xs-laptop);border:var(--px-size-border-m) solid transparent}a px-span,button px-span{font-size:var(--px-text-size-label-s-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625rem){a,button{padding:var(--px-padding-xs-desktop)}a px-span,button px-span{font-size:var(--px-text-size-label-s-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
 const actionButtonStyles = new CSSStyleSheet();
 const actionLinkStyles = new CSSStyleSheet();
 actionButtonStyles.replaceSync(actionButtonCss);
@@ -2399,11 +2399,11 @@ const _ActionButton = class _ActionButton extends PxElement {
           <px-icon
             name="${this.getAttribute("icon-name")}"
             from="${this.getAttribute("icon-from")}"
-            size="s"
+            size="m"
             hidden--mobile
           >
           </px-icon>
-          <px-span color="brand"><slot></slot></px-span>
+          <px-span color="brand" font-size="inherit"><slot></slot></px-span>
         </px-vstack>
       </button>
     `;
@@ -3315,10 +3315,10 @@ const _ActionLink = class _ActionLink extends PxElement {
         <px-icon
           name="${this.getAttribute("icon-name")}"
           from="${this.getAttribute("icon-from")}"
-          size="s"
+          size="m"
         >
         </px-icon>
-        <px-span color="brand" hidden--mobile><slot></slot></px-span>
+        <px-span color="brand" font-size="inherit" hidden--mobile><slot></slot></px-span>
       </px-vstack>
     </a>`;
     this.shadowRoot.innerHTML = this.template();
@@ -9392,7 +9392,7 @@ let ColorOptionLink = _ColorOptionLink;
 if (!customElements.get("px-color-option-link")) {
   customElements.define("px-color-option-link", ColorOptionLink);
 }
-const contentHeaderCss = ":host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}";
+const contentHeaderCss = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content ::slotted([slot="patch"]){flex-shrink:0}.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (min-width: 90.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}';
 const styles$A = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-tablet)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-laptop)}}';
 const styleSheet$t = new CSSStyleSheet();
 styleSheet$t.replaceSync(styles$A);
@@ -10015,6 +10015,10 @@ const _ContentHeader = class _ContentHeader extends PxElement {
                 <px-h1><slot></slot></px-h1>
                 <slot name="subtitle"></slot>
               </px-vstack>
+              <px-stack gap="s" direction="row" direction--mobile="column">
+                <slot name="patch" shrink></slot>
+                <slot name="patch-description"></slot>
+              </px-stack>
             </div>
           </px-container>
         </px-grid>
@@ -10040,38 +10044,22 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "has-gridding--mobile",
       "has-gridding--tablet",
       "has-gridding--laptop",
+      "has-gridding--desktop",
       "inverted"
     ];
   }
   connectedCallback() {
-    if (this.$patchDescriptionSlot) {
-      this.shadowRoot.querySelector(
-        ".content-header-content"
-      ).insertAdjacentHTML(
-        "beforeend",
-        `<px-stack gap="s" direction="row" direction--mobile="column">
-          <slot name="patch" shrink></slot>
-          <slot name="patch-description"></slot>
-        </px-stack>`
-      );
-    }
-    if (this.$subtitleSlot) {
-      this.$subtitleSlot.setAttribute("variant", "subtitle");
-    }
-    if (this.$patchDescriptionSlot) {
-      if (this.$patchDescriptionSlot.localName === "px-p") {
-        this.$patchDescriptionSlot.setAttribute("variant", "default");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
-        this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
-        this.$patchDescriptionSlot.removeAttribute("font-weight");
-        this.$patchDescriptionSlot.removeAttribute("color");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-price") {
-        this.$patchDescriptionSlot.setAttribute("size", "m");
-      }
-    }
+    var _a, _b;
+    this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this);
+    this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this);
+    this.styleSubtitleSlot();
+    this.stylepatchDescriptionSlotted();
     this.createGridding();
+    (_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
+    (_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
+      "slotchange",
+      this.stylepatchDescriptionSlotted
+    );
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -10104,6 +10092,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         case "has-gridding--mobile":
         case "has-gridding--tablet":
         case "has-gridding--laptop":
+        case "has-gridding--desktop":
           this.createGridding(newValue);
           break;
         case "inverted":
@@ -10121,6 +10110,37 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       }
     }
   }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
+      "slotchange",
+      this.styleSubtitleSlot
+    );
+    (_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
+      "slotchange",
+      this.stylepatchDescriptionSlotted
+    );
+  }
+  stylepatchDescriptionSlotted() {
+    if (this.$patchDescriptionSlotted) {
+      if (this.$patchDescriptionSlotted.localName === "px-p") {
+        this.$patchDescriptionSlotted.setAttribute("variant", "default");
+      }
+      if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
+        this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
+        this.$patchDescriptionSlotted.removeAttribute("font-weight");
+        this.$patchDescriptionSlotted.removeAttribute("color");
+      }
+      if (this.$patchDescriptionSlotted.localName === "px-price") {
+        this.$patchDescriptionSlotted.setAttribute("size", "m");
+      }
+    }
+  }
+  styleSubtitleSlot() {
+    if (this.$subtitleSlotted) {
+      this.$subtitleSlotted.setAttribute("variant", "subtitle");
+    }
+  }
   createGridding(value) {
     const breakpoints = [
       { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
@@ -10138,6 +10158,11 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         prop: "hasGriddingLaptop",
         gridAttr: "grid-cols--laptop",
         attr: "col-span--laptop"
+      },
+      {
+        prop: "hasGriddingDesktop",
+        gridAttr: "grid-cols--desktop",
+        attr: "col-span--desktop"
       }
     ];
     const spanElement = this.shadowRoot.querySelector(
@@ -10167,9 +10192,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     return this.shadowRoot.querySelector("px-h1");
   }
   get $subtitleSlot() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="subtitle"]'
+    );
+  }
+  get $subtitleSlotted() {
     return this.querySelector('[slot="subtitle"]');
   }
   get $patchDescriptionSlot() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="patch-description"]'
+    );
+  }
+  get $patchDescriptionSlotted() {
     return this.querySelector('[slot="patch-description"]');
   }
   get $overlapSlot() {
@@ -10286,6 +10323,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       this.removeAttribute("has-gridding--laptop");
     }
   }
+  get hasGriddingDesktop() {
+    return this.hasAttribute("has-gridding--desktop");
+  }
+  set hasGriddingDesktop(value) {
+    if (value) {
+      this.setAttribute("has-gridding--desktop", "");
+    } else {
+      this.removeAttribute("has-gridding--desktop");
+    }
+  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -10521,6 +10568,7 @@ const HIDE_EVENT = "px.lavender.drawer.hide";
 class Drawer extends HTMLElement {
   constructor() {
     super();
+    this.previousFocusedElement = null;
     this.template = `<dialog popover role="dialog" aria-modal="true" >
     <div id="container">
       <px-vstack gap="heading-to-subtitle" id="header">
@@ -10645,14 +10693,18 @@ class Drawer extends HTMLElement {
     }
   }
   show() {
-    var _a, _b;
-    (_b = (_a = this.$dialog).showPopover) == null ? void 0 : _b.call(_a);
+    var _a, _b, _c;
+    const active = document.activeElement;
+    this.previousFocusedElement = ((_a = active == null ? void 0 : active.shadowRoot) == null ? void 0 : _a.activeElement) ?? active;
+    (_c = (_b = this.$dialog).showPopover) == null ? void 0 : _c.call(_b);
     document.body.style.overflow = "hidden";
   }
   hide() {
-    var _a, _b;
+    var _a, _b, _c;
     (_b = (_a = this.$dialog).hidePopover) == null ? void 0 : _b.call(_a);
     document.body.style.overflow = "";
+    (_c = this.previousFocusedElement) == null ? void 0 : _c.focus();
+    this.previousFocusedElement = null;
     this.dispatchEvent(
       new Event(HIDE_EVENT, {
         bubbles: true,
@@ -10804,7 +10856,7 @@ class Drawer extends HTMLElement {
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
 }
-const styles$x = ':host{position:relative}::slotted([slot="popover"]){position:fixed;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
+const styles$x = ':host{position:relative}::slotted([slot="popover"]){position:fixed;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto;max-height:var(--px-popover-max-height)}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
 const anchorAlignmentValues = [
   "top-left",
   "top-right",
@@ -10936,7 +10988,8 @@ class Dropdown extends WithExtraAttributes {
       "id",
       "anchoralignment",
       "use-polyfill",
-      "manual-toggle"
+      "manual-toggle",
+      "popover-height"
     ];
   }
   connectedCallback() {
@@ -10978,12 +11031,25 @@ class Dropdown extends WithExtraAttributes {
             (_a = this.$trigger) == null ? void 0 : _a.removeAttribute("aria-expanded");
           }
           break;
+        case "popover-height":
+          this.updatePopoverHeight(newValue);
+          break;
         default:
           super.attributeChangedCallback(name, oldValue, newValue);
           break;
       }
     }
   }
+  updatePopoverHeight(newValue) {
+    if (newValue) {
+      this.$popoverElement.style.setProperty(
+        "--px-popover-max-height",
+        newValue
+      );
+    } else {
+      this.$popoverElement.style.removeProperty("--px-popover-max-height");
+    }
+  }
   initPopover() {
     if (this.$trigger) {
       this.$trigger.setAttribute("popovertarget", this.popoverId);
@@ -11046,6 +11112,16 @@ class Dropdown extends WithExtraAttributes {
       this.removeAttribute("manual-toggle");
     }
   }
+  get popoverHeight() {
+    return this.getAttribute("popover-height");
+  }
+  set popoverHeight(value) {
+    if (value) {
+      this.setAttribute("popover-height", value);
+    } else {
+      this.removeAttribute("popover-height");
+    }
+  }
 }
 _Dropdown_instances = new WeakSet();
 resetManualPopoverDisplay_fn = function() {
@@ -11878,7 +11954,7 @@ let FooterSitemapItem = _FooterSitemapItem;
 if (!customElements.get("px-footer-sitemap-item")) {
   customElements.define("px-footer-sitemap-item", FooterSitemapItem);
 }
-const styles$v = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:32px 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host([current]) button,button:hover,:host([current]) a,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:30px}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (min-width: 48rem){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
+const styles$v = ":host{display:block;height:100%}:host *{box-sizing:border-box}button,a{display:flex;flex-direction:column;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:var(--px-padding-m-mobile) 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host([current]) button,button:hover,:host([current]) a,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (min-width: 48rem){button,a{font-size:var(--px-text-size-label-m-tablet);padding:var(--px-padding-m-tablet) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop);padding:var(--px-padding-m-laptop) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-m-desktop) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
 const stylesheet$7 = new CSSStyleSheet();
 stylesheet$7.replaceSync(styles$v);
 class HeaderItem extends WithExtraAttributes {
@@ -11994,7 +12070,7 @@ class MDDLink extends HTMLElement {
 if (!customElements.get("px-mdd-a")) {
   customElements.define("px-mdd-a", MDDLink);
 }
-const styles$u = "#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 screen and (min-width: 48rem){#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 screen and (min-width: 64.0625rem){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
+const styles$u = '#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}#primary-navigation div,#primary-navigation px-hstack{height:100%}#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 screen and (min-width: 48rem){#dropdown-zone--desktop{display:flex;justify-content:space-between;align-items:center}#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-tablet)}}@media screen and (min-width: 64.0625rem){#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-laptop)}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-laptop)}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-desktop)}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-desktop)}}';
 const stylesheet$6 = new CSSStyleSheet();
 stylesheet$6.replaceSync(styles$u);
 const menuAriaLabel = "Menu";
@@ -12008,12 +12084,15 @@ class Header extends WithExtraAttributes {
     <div>
       <header>
         <slot name="skip"></slot>
-        <px-section id="navigation-container" padding-block--mobile="s" padding-block="none" background-color="none">
+        <px-section id="navigation-container" padding-bottom="none" padding-bottom--mobile="s" padding-top="s" background-color="none">
           <div id="dropdown-zone--desktop">
             <slot name="target-group"></slot>
             <slot name="user-language"></slot>
           </div>
-          <px-hstack gap="default" wrap="wrap" align-items="center">
+          <px-hstack gap="default" wrap="wrap" id="navigation-wrapper">
+            <px-hstack align-items="center">
+              <slot name="header-logo"></slot>
+            </px-hstack>
             <slot name="header-logo"></slot>
             <nav id="primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
               <div role="list">
@@ -12028,7 +12107,7 @@ class Header extends WithExtraAttributes {
               <px-button-icon id="burger-menu" variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
                               aria-expanded="false" hidden--tablet hidden--laptop
                               hidden--desktop>
-                <px-icon name="burger_menu" from="lavender"></px-icon>
+                <px-icon name="burger_menu" from="lavender" size="m"></px-icon>
               </px-button-icon>
             </px-hstack>
           </px-hstack>
@@ -13434,7 +13513,7 @@ class MDDCloser extends HTMLElement {
 if (!customElements.get("px-mdd-closer")) {
   customElements.define("px-mdd-closer", MDDCloser);
 }
-const styles$q = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:32px}}px-p{display:none}@media screen and (max-width: 47.9375rem){px-p{display:block;padding-bottom:32px}}#footer{display:none}@media screen and (max-width: 47.9375rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}";
+const styles$q = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}px-p{display:none}@media screen and (max-width: 47.9375rem){px-p{display:block;padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}#footer{display:none}@media screen and (max-width: 47.9375rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-m-mobile) var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default);border-top:var(--px-size-border-m) solid var(--px-color-border-main-default)}}";
 const stylesheet$3 = new CSSStyleSheet();
 stylesheet$3.replaceSync(styles$q);
 class MegaDropDown extends HTMLElement {
@@ -13452,7 +13531,7 @@ class MegaDropDown extends HTMLElement {
         background-color="none"
       >
         <px-vstack>
-          <px-hstack id="mobile-header" gap="s" align-items="center">
+          <px-hstack id="mobile-header" gap="default" align-items="center">
             <!-- Back button is only visible if the name is __lavender_mobile_menu -->
             <px-button id="back-button" variant="tertiary">
               <px-icon name="chevron_left" from="lavender"></px-icon>
@@ -13467,9 +13546,8 @@ class MegaDropDown extends HTMLElement {
             </px-button-icon>
           </px-hstack>
           <px-p
-            font-size="heading-3xl"
+            variant="title-2xl"
             color="neutral"
-            font-weight="title"
           >
             <slot name="title"></slot>
           </px-p>
@@ -13483,6 +13561,7 @@ class MegaDropDown extends HTMLElement {
             direction--mobile="column"
             direction="row"
             gap="l"
+            gap--mobile="page-layout-between-sections"
             id="sections-container"
           >
             <slot></slot>
@@ -13553,7 +13632,7 @@ class MegaDropDown extends HTMLElement {
       }
     });
     if (this.getAttribute("name") === "__lavender_mobile_menu") {
-      __privateGet(this, _MegaDropDown_instances, $backButton_get).style.visibility = "hidden";
+      __privateGet(this, _MegaDropDown_instances, $backButton_get).style.display = "none";
     }
     if (this.getAttribute("name") !== "__lavender_mobile_menu") {
       __privateGet(this, _MegaDropDown_instances, $title_get).innerText = ((_b = (_a = this.closest("px-header")) == null ? void 0 : _a.querySelector(
@@ -13692,7 +13771,7 @@ $closeButtons_get = function() {
 if (!customElements.get("px-mdd")) {
   customElements.define("px-mdd", MegaDropDown);
 }
-const styles$p = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:8px;padding-inline:16px}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:8px;padding-inline:16px;line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}';
+const styles$p = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main);padding-inline:var(--px-padding-m-mobile)}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main);padding-inline:var(--px-padding-m-mobile);line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}';
 const stylesheet$2 = new CSSStyleSheet();
 stylesheet$2.replaceSync(styles$p);
 class MddSection extends HTMLElement {
@@ -13707,7 +13786,7 @@ class MddSection extends HTMLElement {
         <slot></slot>
       </px-vstack>
     </nav>
-    <px-vstack gap="default" gap--mobile="default">
+    <px-vstack gap="default" gap--mobile="s">
       <slot name="footer"></slot>
     </px-vstack>
   </px-vstack>`;
@@ -13764,7 +13843,7 @@ class MddSection extends HTMLElement {
 if (!customElements.get("px-mdd-section")) {
   customElements.define("px-mdd-section", MddSection);
 }
-const styles$o = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
+const styles$o = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%;text-align:left;font-weight:var(--px-font-weight-title)}a,button{display:block;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a,button{font-size:var(--px-text-size-label-m-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a,button{font-size:var(--px-text-size-label-m-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a,button{font-size:var(--px-text-size-label-m-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
 const stylesheet$1 = new CSSStyleSheet();
 stylesheet$1.replaceSync(styles$o);
 class MddSectionItem extends HTMLElement {
@@ -13772,13 +13851,13 @@ class MddSectionItem extends HTMLElement {
     var _a;
     super();
     this.template = `
-    <px-hstack align-items="center">
+    <px-hstack align-items="center" gap="default">
       <span class="mdd-section-item-action-container">
         <slot></slot>
         <slot name="after"></slot>
       </span>
       <px-spacer></px-spacer>
-      <px-icon name="chevron_right" from="lavender"></px-icon>
+      <px-icon name="chevron_right" from="lavender" size="m"></px-icon>
     </px-hstack>`;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
@@ -13861,7 +13940,7 @@ class MddSectionItem extends HTMLElement {
 if (!customElements.get("px-mdd-section-item")) {
   customElements.define("px-mdd-section-item", MddSectionItem);
 }
-const styles$n = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
+const styles$n = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%;flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
 const styleSheet$m = new CSSStyleSheet();
 styleSheet$m.replaceSync(styles$n);
 const CLOSE_EVENT$1 = "px.lavender.modal.close";
@@ -16011,13 +16090,13 @@ class Tabs extends HTMLElement {
     this.template = () => `
     <div id="container">
       <div id="tab-container">
-        <px-button-icon id="previous" aria-hidden="true">
+        <px-button-icon id="previous" aria-hidden="true" hidden--mobile hidden--tablet>
           <px-icon name="chevron_left" from="lavender"></px-icon>
         </px-button-icon>
         <div id="tablist">
           <slot name="tabs"></slot>
         </div>
-        <px-button-icon id="next"  aria-hidden="true">
+        <px-button-icon id="next" aria-hidden="true" hidden--mobile hidden--tablet>
           <px-icon name="chevron_right" from="lavender"></px-icon>
         </px-button-icon>
       </div>
@@ -17940,7 +18019,7 @@ class Typography extends HTMLElement {
 if (!customElements.get("px-typography")) {
   customElements.define("px-typography", Typography);
 }
-const styles$1 = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);box-shadow:0 4px 6px -1px #25252514;overflow:hidden}:host([inverted]) .dropdown-content{background-color:var(--px-color-background-surface-dark)}";
+const styles$1 = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);box-shadow:0 4px 6px -1px #25252514;padding:0;margin-top:calc(var(--px-focus-offset-mobile) + var(--px-focus-outline-mobile));overflow:auto}@media screen and (min-width: 48rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-tablet) + var(--px-focus-outline-tablet))}}@media screen and (min-width: 64.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-laptop) + var(--px-focus-outline-laptop))}}@media screen and (min-width: 90.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-desktop) + var(--px-focus-outline-desktop))}}:host([inverted]) .dropdown-content{background-color:var(--px-color-background-surface-dark)}";
 const styleSheet$2 = new CSSStyleSheet();
 styleSheet$2.replaceSync(styles$1);
 const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
@@ -18011,27 +18090,34 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
       "extended--mobile",
       "extended--tablet",
       "extended--laptop",
-      "extended--desktop"
+      "extended--desktop",
+      "popover-height"
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "size":
-      case "state":
-      case "extended":
-      case "extended--mobile":
-      case "extended--tablet":
-      case "extended--laptop":
-      case "extended--desktop":
-        if (newValue !== null) {
-          this.$input.setAttribute(name, newValue);
-        } else {
-          this.$input.removeAttribute(name);
-        }
-        break;
-      default:
-        super.attributeChangedCallback(name, oldValue, newValue);
-        break;
+    if (oldValue !== newValue) {
+      switch (name) {
+        case "size":
+        case "state":
+        case "extended":
+        case "extended--mobile":
+        case "extended--tablet":
+        case "extended--laptop":
+        case "extended--desktop":
+          if (newValue !== null) {
+            this.$input.setAttribute(name, newValue);
+          } else {
+            this.$input.removeAttribute(name);
+          }
+          break;
+        case "popover-height":
+          this.setDefaultPopoverHeight();
+          this.$dropDown.popoverHeight = this.popoverHeight;
+          break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+          break;
+      }
     }
   }
   connectedCallback() {
@@ -18050,11 +18136,17 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
     if (labelId) {
       this.$dropDownContent.setAttribute("aria-labelledby", labelId);
     }
+    this.setDefaultPopoverHeight();
   }
   disconnectedCallback() {
     this.$input.removeEventListener("input", __privateGet(this, _onInput));
     this.removeEventListener("keydown", __privateGet(this, _onKeyDown));
   }
+  setDefaultPopoverHeight() {
+    if (!this.popoverHeight) {
+      this.popoverHeight = "16.5rem";
+    }
+  }
   get value() {
     return this.$input.value;
   }
@@ -18088,6 +18180,16 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   get $label() {
     return this.querySelector('[slot="label"]');
   }
+  get popoverHeight() {
+    return this.getAttribute("popover-height");
+  }
+  set popoverHeight(value) {
+    if (value) {
+      this.setAttribute("popover-height", value);
+    } else {
+      this.removeAttribute("popover-height");
+    }
+  }
 };
 _controlId = new WeakMap();
 _onKeyDown = new WeakMap();