@proximus/lavender 2.0.0-alpha.50 → 2.0.0-alpha.54

package/dist/lavender.es.js

@@ -1744,11 +1744,18 @@ const accordionBackgroundColorValues = [
 const _Accordion = class _Accordion extends PxElement {
   constructor() {
     super(accordionStyles);
+    this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     this.template = () => `<details>
-      <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot><span class="arrow-icon"></span></summary>
+      <summary ${this.isSafari ? "" : 'role="button"'}><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot><span class="arrow-icon"></span></summary>
       <slot name="content"></slot>
     </details>`;
     this.shadowRoot.innerHTML = this.template();
+    if (this.$details && this.$summary) {
+      this.updateAriaExpanded();
+      this.$details.addEventListener("toggle", () => {
+        this.updateAriaExpanded();
+      });
+    }
   }
   static get observedAttributes() {
     return [
@@ -1808,6 +1815,18 @@ const _Accordion = class _Accordion extends PxElement {
       console.error(`${newValue} is not an allowed ${attrName} value`);
     }
   }
+  updateAriaExpanded() {
+    this.$summary.setAttribute(
+      "aria-expanded",
+      this.$details.hasAttribute("open") ? "true" : "false"
+    );
+  }
+  get $summary() {
+    return this.shadowRoot.querySelector("summary");
+  }
+  get $details() {
+    return this.shadowRoot.querySelector("details");
+  }
   get variant() {
     return this.getAttribute("variant");
   }
@@ -11648,7 +11667,7 @@ class MDDCloser extends HTMLElement {
 if (!customElements.get("px-mdd-closer")) {
   customElements.define("px-mdd-closer", MDDCloser);
 }
-const styles$m = ":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-width: 767px){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:2em;right:1em}#sections-container{overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#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$m = ":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: 285px){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 767px){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:2em;right:1em}#sections-container{overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#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 stylesheet$3 = new CSSStyleSheet();
 stylesheet$3.replaceSync(styles$m);
 class MegaDropDown extends HTMLElement {
@@ -11776,7 +11795,6 @@ class MegaDropDown extends HTMLElement {
       __privateGet(this, _MegaDropDown_instances, $footer_get).style.display = "none";
     }
     __privateSet(this, _mutationObserver, new MutationObserver(() => {
-      console.log("mutation observed");
       if (this.$slotMddFooter) {
         __privateGet(this, _MegaDropDown_instances, $footer_get).style.display = "block";
       }