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

package/dist/lavender.es.js

@@ -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() {