@proximus/lavender 2.0.0-alpha.122 → 2.0.0-alpha.124

package/dist/lavender.es.js

@@ -9392,7 +9392,7 @@ let ColorOptionLink = _ColorOptionLink;
 if (!customElements.get("px-color-option-link")) {
   customElements.define("px-color-option-link", ColorOptionLink);
 }
-const contentHeaderCss = ":host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}";
+const contentHeaderCss = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content ::slotted([slot="patch"]){flex-shrink:0}.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (min-width: 90.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}';
 const styles$A = ':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$t = new CSSStyleSheet();
 styleSheet$t.replaceSync(styles$A);
@@ -10015,6 +10015,10 @@ const _ContentHeader = class _ContentHeader extends PxElement {
                 <px-h1><slot></slot></px-h1>
                 <slot name="subtitle"></slot>
               </px-vstack>
+              <px-stack gap="s" direction="row" direction--mobile="column">
+                <slot name="patch" shrink></slot>
+                <slot name="patch-description"></slot>
+              </px-stack>
             </div>
           </px-container>
         </px-grid>
@@ -10040,38 +10044,22 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "has-gridding--mobile",
       "has-gridding--tablet",
       "has-gridding--laptop",
+      "has-gridding--desktop",
       "inverted"
     ];
   }
   connectedCallback() {
-    if (this.$patchDescriptionSlot) {
-      this.shadowRoot.querySelector(
-        ".content-header-content"
-      ).insertAdjacentHTML(
-        "beforeend",
-        `<px-stack gap="s" direction="row" direction--mobile="column">
-          <slot name="patch" shrink></slot>
-          <slot name="patch-description"></slot>
-        </px-stack>`
-      );
-    }
-    if (this.$subtitleSlot) {
-      this.$subtitleSlot.setAttribute("variant", "subtitle");
-    }
-    if (this.$patchDescriptionSlot) {
-      if (this.$patchDescriptionSlot.localName === "px-p") {
-        this.$patchDescriptionSlot.setAttribute("variant", "default");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
-        this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
-        this.$patchDescriptionSlot.removeAttribute("font-weight");
-        this.$patchDescriptionSlot.removeAttribute("color");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-price") {
-        this.$patchDescriptionSlot.setAttribute("size", "m");
-      }
-    }
+    var _a, _b;
+    this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this);
+    this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this);
+    this.styleSubtitleSlot();
+    this.stylepatchDescriptionSlotted();
     this.createGridding();
+    (_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
+    (_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
+      "slotchange",
+      this.stylepatchDescriptionSlotted
+    );
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -10104,6 +10092,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         case "has-gridding--mobile":
         case "has-gridding--tablet":
         case "has-gridding--laptop":
+        case "has-gridding--desktop":
           this.createGridding(newValue);
           break;
         case "inverted":
@@ -10121,6 +10110,37 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       }
     }
   }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
+      "slotchange",
+      this.styleSubtitleSlot
+    );
+    (_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
+      "slotchange",
+      this.stylepatchDescriptionSlotted
+    );
+  }
+  stylepatchDescriptionSlotted() {
+    if (this.$patchDescriptionSlotted) {
+      if (this.$patchDescriptionSlotted.localName === "px-p") {
+        this.$patchDescriptionSlotted.setAttribute("variant", "default");
+      }
+      if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
+        this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
+        this.$patchDescriptionSlotted.removeAttribute("font-weight");
+        this.$patchDescriptionSlotted.removeAttribute("color");
+      }
+      if (this.$patchDescriptionSlotted.localName === "px-price") {
+        this.$patchDescriptionSlotted.setAttribute("size", "m");
+      }
+    }
+  }
+  styleSubtitleSlot() {
+    if (this.$subtitleSlotted) {
+      this.$subtitleSlotted.setAttribute("variant", "subtitle");
+    }
+  }
   createGridding(value) {
     const breakpoints = [
       { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
@@ -10138,6 +10158,11 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         prop: "hasGriddingLaptop",
         gridAttr: "grid-cols--laptop",
         attr: "col-span--laptop"
+      },
+      {
+        prop: "hasGriddingDesktop",
+        gridAttr: "grid-cols--desktop",
+        attr: "col-span--desktop"
       }
     ];
     const spanElement = this.shadowRoot.querySelector(
@@ -10167,9 +10192,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     return this.shadowRoot.querySelector("px-h1");
   }
   get $subtitleSlot() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="subtitle"]'
+    );
+  }
+  get $subtitleSlotted() {
     return this.querySelector('[slot="subtitle"]');
   }
   get $patchDescriptionSlot() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="patch-description"]'
+    );
+  }
+  get $patchDescriptionSlotted() {
     return this.querySelector('[slot="patch-description"]');
   }
   get $overlapSlot() {
@@ -10286,6 +10323,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       this.removeAttribute("has-gridding--laptop");
     }
   }
+  get hasGriddingDesktop() {
+    return this.hasAttribute("has-gridding--desktop");
+  }
+  set hasGriddingDesktop(value) {
+    if (value) {
+      this.setAttribute("has-gridding--desktop", "");
+    } else {
+      this.removeAttribute("has-gridding--desktop");
+    }
+  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -10809,7 +10856,7 @@ class Drawer extends HTMLElement {
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
 }
-const styles$x = ':host{position:relative}::slotted([slot="popover"]){position:fixed;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
+const styles$x = ':host{position:relative}::slotted([slot="popover"]){position:fixed;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto;max-height:var(--px-popover-max-height)}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
 const anchorAlignmentValues = [
   "top-left",
   "top-right",
@@ -10941,7 +10988,8 @@ class Dropdown extends WithExtraAttributes {
       "id",
       "anchoralignment",
       "use-polyfill",
-      "manual-toggle"
+      "manual-toggle",
+      "popover-height"
     ];
   }
   connectedCallback() {
@@ -10983,12 +11031,25 @@ class Dropdown extends WithExtraAttributes {
             (_a = this.$trigger) == null ? void 0 : _a.removeAttribute("aria-expanded");
           }
           break;
+        case "popover-height":
+          this.updatePopoverHeight(newValue);
+          break;
         default:
           super.attributeChangedCallback(name, oldValue, newValue);
           break;
       }
     }
   }
+  updatePopoverHeight(newValue) {
+    if (newValue) {
+      this.$popoverElement.style.setProperty(
+        "--px-popover-max-height",
+        newValue
+      );
+    } else {
+      this.$popoverElement.style.removeProperty("--px-popover-max-height");
+    }
+  }
   initPopover() {
     if (this.$trigger) {
       this.$trigger.setAttribute("popovertarget", this.popoverId);
@@ -11051,6 +11112,16 @@ class Dropdown extends WithExtraAttributes {
       this.removeAttribute("manual-toggle");
     }
   }
+  get popoverHeight() {
+    return this.getAttribute("popover-height");
+  }
+  set popoverHeight(value) {
+    if (value) {
+      this.setAttribute("popover-height", value);
+    } else {
+      this.removeAttribute("popover-height");
+    }
+  }
 }
 _Dropdown_instances = new WeakSet();
 resetManualPopoverDisplay_fn = function() {
@@ -13866,7 +13937,7 @@ class MddSectionItem extends HTMLElement {
 if (!customElements.get("px-mdd-section-item")) {
   customElements.define("px-mdd-section-item", MddSectionItem);
 }
-const styles$n = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
+const styles$n = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%;flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
 const styleSheet$m = new CSSStyleSheet();
 styleSheet$m.replaceSync(styles$n);
 const CLOSE_EVENT$1 = "px.lavender.modal.close";
@@ -17962,7 +18033,7 @@ class Typography extends HTMLElement {
 if (!customElements.get("px-typography")) {
   customElements.define("px-typography", 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 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;padding:0;margin-top:calc(var(--px-focus-offset-mobile) + var(--px-focus-outline-mobile));overflow:auto}@media screen and (min-width: 48rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-tablet) + var(--px-focus-outline-tablet))}}@media screen and (min-width: 64.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-laptop) + var(--px-focus-outline-laptop))}}@media screen and (min-width: 90.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-desktop) + var(--px-focus-outline-desktop))}}: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 WithExtraAttributes {
@@ -18033,27 +18104,34 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
       "extended--mobile",
       "extended--tablet",
       "extended--laptop",
-      "extended--desktop"
+      "extended--desktop",
+      "popover-height"
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    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;
+    if (oldValue !== newValue) {
+      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;
+        case "popover-height":
+          this.setDefaultPopoverHeight();
+          this.$dropDown.popoverHeight = this.popoverHeight;
+          break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+          break;
+      }
     }
   }
   connectedCallback() {
@@ -18072,11 +18150,17 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
     if (labelId) {
       this.$dropDownContent.setAttribute("aria-labelledby", labelId);
     }
+    this.setDefaultPopoverHeight();
   }
   disconnectedCallback() {
     this.$input.removeEventListener("input", __privateGet(this, _onInput));
     this.removeEventListener("keydown", __privateGet(this, _onKeyDown));
   }
+  setDefaultPopoverHeight() {
+    if (!this.popoverHeight) {
+      this.popoverHeight = "16.5rem";
+    }
+  }
   get value() {
     return this.$input.value;
   }
@@ -18110,6 +18194,16 @@ const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
   get $label() {
     return this.querySelector('[slot="label"]');
   }
+  get popoverHeight() {
+    return this.getAttribute("popover-height");
+  }
+  set popoverHeight(value) {
+    if (value) {
+      this.setAttribute("popover-height", value);
+    } else {
+      this.removeAttribute("popover-height");
+    }
+  }
 };
 _controlId = new WeakMap();
 _onKeyDown = new WeakMap();