@proximus/lavender 2.0.0-alpha.126 → 2.0.0-alpha.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lavender.cjs.js +1 -1
- package/dist/lavender.es.js +9 -9
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -13510,7 +13510,7 @@ class MDDCloser extends HTMLElement {
|
|
|
13510
13510
|
if (!customElements.get("px-mdd-closer")) {
|
|
13511
13511
|
customElements.define("px-mdd-closer", MDDCloser);
|
|
13512
13512
|
}
|
|
13513
|
-
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:
|
|
13513
|
+
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)}}";
|
|
13514
13514
|
const stylesheet$3 = new CSSStyleSheet();
|
|
13515
13515
|
stylesheet$3.replaceSync(styles$q);
|
|
13516
13516
|
class MegaDropDown extends HTMLElement {
|
|
@@ -13543,9 +13543,8 @@ class MegaDropDown extends HTMLElement {
|
|
|
13543
13543
|
</px-button-icon>
|
|
13544
13544
|
</px-hstack>
|
|
13545
13545
|
<px-p
|
|
13546
|
-
|
|
13546
|
+
variant="title-2xl"
|
|
13547
13547
|
color="neutral"
|
|
13548
|
-
font-weight="title"
|
|
13549
13548
|
>
|
|
13550
13549
|
<slot name="title"></slot>
|
|
13551
13550
|
</px-p>
|
|
@@ -13559,6 +13558,7 @@ class MegaDropDown extends HTMLElement {
|
|
|
13559
13558
|
direction--mobile="column"
|
|
13560
13559
|
direction="row"
|
|
13561
13560
|
gap="l"
|
|
13561
|
+
gap--mobile="page-layout-between-sections"
|
|
13562
13562
|
id="sections-container"
|
|
13563
13563
|
>
|
|
13564
13564
|
<slot></slot>
|
|
@@ -13629,7 +13629,7 @@ class MegaDropDown extends HTMLElement {
|
|
|
13629
13629
|
}
|
|
13630
13630
|
});
|
|
13631
13631
|
if (this.getAttribute("name") === "__lavender_mobile_menu") {
|
|
13632
|
-
__privateGet(this, _MegaDropDown_instances, $backButton_get).style.
|
|
13632
|
+
__privateGet(this, _MegaDropDown_instances, $backButton_get).style.display = "none";
|
|
13633
13633
|
}
|
|
13634
13634
|
if (this.getAttribute("name") !== "__lavender_mobile_menu") {
|
|
13635
13635
|
__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() {
|
|
|
13768
13768
|
if (!customElements.get("px-mdd")) {
|
|
13769
13769
|
customElements.define("px-mdd", MegaDropDown);
|
|
13770
13770
|
}
|
|
13771
|
-
const styles$p = ':host{flex-basis:25%}@media screen and (max-width: 47.938rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color
|
|
13771
|
+
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)}}';
|
|
13772
13772
|
const stylesheet$2 = new CSSStyleSheet();
|
|
13773
13773
|
stylesheet$2.replaceSync(styles$p);
|
|
13774
13774
|
class MddSection extends HTMLElement {
|
|
@@ -13783,7 +13783,7 @@ class MddSection extends HTMLElement {
|
|
|
13783
13783
|
<slot></slot>
|
|
13784
13784
|
</px-vstack>
|
|
13785
13785
|
</nav>
|
|
13786
|
-
<px-vstack gap="default" gap--mobile="
|
|
13786
|
+
<px-vstack gap="default" gap--mobile="s">
|
|
13787
13787
|
<slot name="footer"></slot>
|
|
13788
13788
|
</px-vstack>
|
|
13789
13789
|
</px-vstack>`;
|
|
@@ -13840,7 +13840,7 @@ class MddSection extends HTMLElement {
|
|
|
13840
13840
|
if (!customElements.get("px-mdd-section")) {
|
|
13841
13841
|
customElements.define("px-mdd-section", MddSection);
|
|
13842
13842
|
}
|
|
13843
|
-
const styles$o = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit
|
|
13843
|
+
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)}}';
|
|
13844
13844
|
const stylesheet$1 = new CSSStyleSheet();
|
|
13845
13845
|
stylesheet$1.replaceSync(styles$o);
|
|
13846
13846
|
class MddSectionItem extends HTMLElement {
|
|
@@ -13848,13 +13848,13 @@ class MddSectionItem extends HTMLElement {
|
|
|
13848
13848
|
var _a;
|
|
13849
13849
|
super();
|
|
13850
13850
|
this.template = `
|
|
13851
|
-
<px-hstack align-items="center">
|
|
13851
|
+
<px-hstack align-items="center" gap="default">
|
|
13852
13852
|
<span class="mdd-section-item-action-container">
|
|
13853
13853
|
<slot></slot>
|
|
13854
13854
|
<slot name="after"></slot>
|
|
13855
13855
|
</span>
|
|
13856
13856
|
<px-spacer></px-spacer>
|
|
13857
|
-
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
13857
|
+
<px-icon name="chevron_right" from="lavender" size="m"></px-icon>
|
|
13858
13858
|
</px-hstack>`;
|
|
13859
13859
|
this.attachShadow({ mode: "open" });
|
|
13860
13860
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|