@proximus/lavender 2.0.0-alpha.125 → 2.0.0-alpha.127

package/dist/lavender.es.js

@@ -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,button{padding:var(--px-padding-xs-laptop) var(--px-padding-2xs-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) var(--px-padding-2xs-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 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>
@@ -13510,7 +13510,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.8125rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.938rem){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.938rem){#mobile-header{display:block;padding-bottom:32px}}px-p{display:none}@media screen and (max-width: 47.938rem){px-p{display:block;padding-bottom:32px}}#footer{display:none}@media screen and (max-width: 47.938rem){#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.8125rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.938rem){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.938rem){#mobile-header{display:block;padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}px-p{display:none}@media screen and (max-width: 47.938rem){px-p{display:block;padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}#footer{display:none}@media screen and (max-width: 47.938rem){#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)}}";
 const stylesheet$3 = new CSSStyleSheet();
 stylesheet$3.replaceSync(styles$q);
 class MegaDropDown extends HTMLElement {
@@ -13543,9 +13543,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>
@@ -13559,6 +13558,7 @@ class MegaDropDown extends HTMLElement {
             direction--mobile="column"
             direction="row"
             gap="l"
+            gap--mobile="page-layout-between-sections"
             id="sections-container"
           >
             <slot></slot>
@@ -13629,7 +13629,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(
@@ -13768,7 +13768,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.938rem){: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.938rem){: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 {
@@ -13783,7 +13783,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>`;
@@ -13840,7 +13840,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-m-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.938rem){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-m-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-m-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-m-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.938rem){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 {
@@ -13848,13 +13848,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];