@proximus/lavender-light 2.0.0-alpha.101 → 2.0.0-alpha.103

package/dist/lavender-light.es.js

@@ -4301,9 +4301,9 @@ if (!customElements.get("px-button-wrapper")) {
 const styles$2 = ':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-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
 const styleSheet = new CSSStyleSheet();
 styleSheet.replaceSync(styles$2);
-class Section extends HTMLElement {
+class Section extends WithExtraAttributes {
   constructor() {
-    super();
+    super(styleSheet);
     this.template = () => `
     <px-container border-radius="none" padding-inline="none">
       <div class="content-wrapper">
@@ -4319,9 +4319,7 @@ class Section extends HTMLElement {
       <slot name="overlap"></slot>
     </div>
   `;
-    this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet];
   }
   connectedCallback() {
     var _a, _b;
@@ -4341,6 +4339,7 @@ class Section extends HTMLElement {
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -4446,6 +4445,9 @@ class Section extends HTMLElement {
         case "border-side--laptop":
           this.$container.borderSideLaptop = newValue;
           break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+          break;
       }
     }
   }
@@ -4668,7 +4670,7 @@ class Section extends HTMLElement {
 if (!customElements.get("px-section")) {
   customElements.define("px-section", Section);
 }
-const styles$1 = ":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)}button:hover,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$1 = ":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 stylesheet$1 = new CSSStyleSheet();
 stylesheet$1.replaceSync(styles$1);
 class HeaderItem extends WithExtraAttributes {
@@ -4687,7 +4689,7 @@ class HeaderItem extends WithExtraAttributes {
     }
   }
   static get observedAttributes() {
-    return ["for", "href"];
+    return ["for", "href", "current"];
   }
   connectedCallback() {
     this.setAttribute("slot", "header-entries");
@@ -4708,9 +4710,9 @@ class HeaderItem extends WithExtraAttributes {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === "href" && this.$a && !!newValue) {
+    if (name === "href" && oldValue !== newValue) {
       this.shadowRoot.innerHTML = this.template();
-    } else if (name === "for" && this.$button && !!newValue) {
+    } else if (name === "for" && oldValue !== newValue && this.$button) {
       this.shadowRoot.innerHTML = this.template();
       this.setupButtonA11y();
     }
@@ -4745,6 +4747,16 @@ class HeaderItem extends WithExtraAttributes {
       this.$button.setAttribute("aria-controls", this.for);
     }
   }
+  get current() {
+    return this.hasAttribute("current");
+  }
+  set current(value) {
+    if (value) {
+      this.setAttribute("current", "");
+    } else {
+      this.removeAttribute("current");
+    }
+  }
   get $button() {
     return this.shadowRoot.querySelector("button");
   }