@proximus/lavender 2.0.0-alpha.102 → 2.0.0-alpha.104

package/dist/lavender.es.js

@@ -11070,7 +11070,6 @@ class HeaderItem extends WithExtraAttributes {
     this.shadowRoot.innerHTML = this.template();
     this.shadowRoot.adoptedStyleSheets = [stylesheet$7];
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.role = "listitem";
     if (this.internals) {
       this.internals.role = "listitem";
     }
@@ -11079,6 +11078,7 @@ class HeaderItem extends WithExtraAttributes {
     return ["for", "href", "current"];
   }
   connectedCallback() {
+    this.role = "listitem";
     this.setAttribute("slot", "header-entries");
     if (this.$button) {
       this.setupButtonA11y();
@@ -11229,12 +11229,12 @@ class Header extends WithExtraAttributes {
     });
     this.shadowRoot.innerHTML = this.template;
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.role = "navigation";
     if (this.internals) {
       this.internals.role = "navigation";
     }
   }
   connectedCallback() {
+    this.role = "navigation";
     this.addEventListener("click", (event) => {
       const targetElement = event.target.closest(
         "px-header-item"
@@ -12683,7 +12683,6 @@ class MegaDropDown extends HTMLElement {
     this.shadowRoot.innerHTML = this.template;
     this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.role = "menu";
     if (this.internals) {
       this.internals.role = "menu";
     }
@@ -12693,6 +12692,7 @@ class MegaDropDown extends HTMLElement {
   }
   connectedCallback() {
     var _a, _b;
+    this.role = "menu";
     if (this.querySelectorAll("px-mdd-section").length === 0) {
       throw new Error("HeaderPanel must contain at least one MenuSection");
     }
@@ -12962,7 +12962,6 @@ class MddSectionItem extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.role = "listitem";
     if (this.internals) {
       this.internals.role = "listitem";
     }
@@ -12987,6 +12986,7 @@ class MddSectionItem extends HTMLElement {
     }
   }
   connectedCallback() {
+    this.role = "listitem";
     if (this.hasAttribute("href")) {
       this.updateView("href", this.href);
       this.$link.href = this.href;
@@ -17766,10 +17766,10 @@ if (!customElements.get("px-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 styleSheet$2 = new CSSStyleSheet();
 styleSheet$2.replaceSync(styles$1);
-const _Autocomplete = class _Autocomplete extends HTMLElement {
+const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   constructor() {
     var _a;
-    super();
+    super(styleSheet$2);
     __privateAdd(this, _Autocomplete_instances);
     __privateAdd(this, _controlId);
     __privateAdd(this, _onKeyDown);
@@ -17810,8 +17810,10 @@ const _Autocomplete = class _Autocomplete extends HTMLElement {
       options[nextIndex].focus();
     });
     __privateSet(this, _onInput, () => {
+      var _a2;
       if (this.$input.value) {
         this.$input.$el.setAttribute("aria-expanded", "true");
+        this.$dropDownContent.style.width = `${(_a2 = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a2.offsetWidth}px`;
         this.$dropDown.showPopover();
       } else {
         this.$input.$el.setAttribute("aria-expanded", "false");
@@ -17820,13 +17822,12 @@ const _Autocomplete = class _Autocomplete extends HTMLElement {
       }
       __privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
     });
-    this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$2];
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "size",
       "state",
       "extended",
@@ -17837,10 +17838,23 @@ const _Autocomplete = class _Autocomplete extends HTMLElement {
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (newValue !== null) {
-      this.$input.setAttribute(name, newValue);
-    } else {
-      this.$input.removeAttribute(name);
+    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;
     }
   }
   connectedCallback() {