@proximus/lavender 1.4.11-alpha.9 → 1.4.11

package/dist/lavender.es.js

@@ -9,7 +9,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_fn, _currentCheckedRadioIndex, _Dropdown_instances, resetManualPopoverDisplay_fn, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _CardContainer_instances, updateImageSrc_fn, applyAspectRatio_fn, syncBackgroundColor_fn, syncBorder_fn, syncDefaultBackgroundColor_fn, syncDefaultBorder_fn, syncInteractiveState_fn, hasInteractiveState_fn, syncInvertedOnChildren_fn, setOrRemove_fn, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3, _controlId, _onKeyDown, _Autocomplete_instances, options_get, _onInput, updateFormValue_fn, _AutocompleteHeader_instances, syncSlot_fn, _AutocompleteOption_instances, syncSlot_fn2;
 const styles$Q = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
 const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
-const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "true" };
+const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "false" };
 function getSupportedPropertyNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
   const inputPrototype = Object.getPrototypeOf($element);
@@ -2385,7 +2385,7 @@ 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 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);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)}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,7 +2399,7 @@ 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>
@@ -3315,7 +3315,7 @@ 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>
@@ -3976,6 +3976,7 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
                 <slot name="title"></slot>
                 <slot name="description"></slot>
                 <slot name="content"></slot>
+                
               </div>
             </px-container>
           </px-grid>
@@ -4111,20 +4112,20 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ];
@@ -4132,16 +4133,16 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridAttr, attr }) => {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
         if (this[prop]) {
-          this.$grid.setAttribute(gridAttr, "3");
-          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridAttr, attr }) => {
-        this.$grid.setAttribute(gridAttr, "1");
-        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
       });
     }
   }
@@ -7220,7 +7221,7 @@ class CellSwitch extends WithExtraAttributes {
     return `
     <div class="cell-switch">
       <px-cell hoverable>
-        <px-switch slot="action-indicator" inert></px-switch>
+        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -8789,7 +8790,7 @@ class CellRadio extends WithExtraAttributes {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio slot="prefix" inert></px-radio>
+        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -9392,7 +9393,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 +10016,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 +10045,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 +10093,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 +10111,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 +10159,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 +10193,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 +10324,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 +10569,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 +10694,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 +10857,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 +10989,8 @@ class Dropdown extends WithExtraAttributes {
       "id",
       "anchoralignment",
       "use-polyfill",
-      "manual-toggle"
+      "manual-toggle",
+      "popover-height"
     ];
   }
   connectedCallback() {
@@ -10978,12 +11032,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 +11113,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() {
@@ -11994,7 +12071,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}#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-top:var(--px-padding-s-tablet);margin-bottom:var(--px-spacing-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media screen and (min-width: 64.0625rem){#dropdown-zone--desktop{margin-top:var(--px-padding-s-laptop);margin-bottom:var(--px-spacing-s-laptop)}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop{margin-top:var(--px-padding-s-desktop);margin-bottom:var(--px-spacing-s-desktop)}}";
 const stylesheet$6 = new CSSStyleSheet();
 stylesheet$6.replaceSync(styles$u);
 const menuAriaLabel = "Menu";
@@ -13434,7 +13511,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 +13529,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 +13544,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 +13559,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 +13630,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 +13769,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 +13784,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 +13841,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 +13849,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 +13938,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 +16088,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>
@@ -16765,7 +16842,7 @@ class TileCheckbox extends WithExtraAttributes {
       <div class="tile-checkbox">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-checkbox slot="suffix" inert></px-checkbox>
+          <px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -17045,7 +17122,7 @@ class TileRadio extends WithExtraAttributes {
       <div class="tile-radio">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-radio slot="suffix" inert></px-radio>
+          <px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -17487,7 +17564,7 @@ class TileSwitch extends WithExtraAttributes {
       <div class="tile-switch">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-switch slot="suffix" inert></px-switch>
+          <px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -17940,7 +18017,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 +18088,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 +18134,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 +18178,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();