@proximus/lavender-dropdown 2.0.0-alpha.21 → 2.0.0-alpha.210

package/dist/Dropdown.d.ts

@@ -13,7 +13,12 @@ export declare class Dropdown extends WithExtraAttributes {
     constructor();
     connectedCallback(): void;
     private isAboutToClose;
+    triggerPopoverDisplay: () => void;
+    showPopover: () => void;
+    hidePopover: () => void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    updatePopoverMaxHeight(newValue?: string): void;
+    updatePopoverMaxWidth(newValue?: string): void;
     private initPopover;
     private get popoverId();
     private get anchorName();
@@ -24,4 +29,14 @@ export declare class Dropdown extends WithExtraAttributes {
     set anchorAlignment(value: AnchorAlignment);
     get usePolyfill(): boolean;
     set usePolyfill(value: boolean);
+    get manualToggle(): boolean;
+    set manualToggle(value: boolean);
+    get popoverHeight(): string | null;
+    set popoverHeight(value: string | null);
+    get popoverMaxHeight(): string | null;
+    set popoverMaxHeight(value: string | null);
+    get popoverMaxWidth(): string | null;
+    set popoverMaxWidth(value: string | null);
+    get inverted(): boolean;
+    set inverted(value: boolean);
 }

package/dist/anchorPolyfill.d.ts

@@ -1,2 +1,2 @@
 import { AnchorAlignment } from './common';
-export declare function anchorPolyfill($trigger: HTMLElement, $popoverElement: HTMLElement, anchorAlignment: AnchorAlignment, computedStyle: CSSStyleDeclaration, usePolyfill?: boolean): void;
+export declare function anchorPolyfill($trigger: HTMLElement, $popoverElement: HTMLElement, anchorAlignment: AnchorAlignment | undefined, computedStyle: CSSStyleDeclaration, usePolyfill?: boolean): void;

package/dist/custom-elements.json

@@ -0,0 +1,309 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/Dropdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Dropdown",
+          "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "css",
+              "privacy": "private",
+              "description": "Instance level styling for the dropdown component.\nThis is used to set the anchor name and position of the popover.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isAboutToClose",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#resetManualPopoverDisplay",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "triggerPopoverDisplay"
+            },
+            {
+              "kind": "field",
+              "name": "showPopover"
+            },
+            {
+              "kind": "field",
+              "name": "hidePopover"
+            },
+            {
+              "kind": "field",
+              "name": "#beforeToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#handleManualPopoverDisplay",
+              "privacy": "private",
+              "description": "Handles the manual display of the popover when the trigger is clicked.\nThis is necessary for cases where the trigger is not a button or input element.\nThis method adds event listeners to the trigger element to toggle the popover.\nIt also manages the state of whether the popover is about to close or not to avoid\nrace conditions when the popover is toggled and the trigger click event is fired."
+            },
+            {
+              "kind": "method",
+              "name": "updatePopoverMaxHeight",
+              "parameters": [
+                {
+                  "name": "newValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updatePopoverMaxWidth",
+              "parameters": [
+                {
+                  "name": "newValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "initPopover",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "popoverId",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "anchorName",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$style",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$trigger",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$popoverElement",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "anchorAlignment",
+              "type": {
+                "text": "AnchorAlignment"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "usePolyfill"
+            },
+            {
+              "kind": "field",
+              "name": "manualToggle"
+            },
+            {
+              "kind": "field",
+              "name": "popoverHeight"
+            },
+            {
+              "kind": "field",
+              "name": "popoverMaxHeight"
+            },
+            {
+              "kind": "field",
+              "name": "popoverMaxWidth"
+            },
+            {
+              "kind": "field",
+              "name": "inverted"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "id"
+            },
+            {
+              "name": "anchoralignment"
+            },
+            {
+              "name": "use-polyfill"
+            },
+            {
+              "name": "manual-toggle"
+            },
+            {
+              "name": "popover-height"
+            },
+            {
+              "name": "popover-max-height"
+            },
+            {
+              "name": "popover-max-width"
+            },
+            {
+              "name": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "WithExtraAttributes",
+            "package": "@proximus/lavender-common"
+          },
+          "tagName": "px-dropdown",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Dropdown",
+          "declaration": {
+            "name": "Dropdown",
+            "module": "src/Dropdown.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-dropdown",
+          "declaration": {
+            "name": "Dropdown",
+            "module": "src/Dropdown.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchorPolyfill.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "anchorPolyfill",
+          "parameters": [
+            {
+              "name": "$trigger",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "$popoverElement",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "anchorAlignment",
+              "default": "'bottom-left'",
+              "type": {
+                "text": "AnchorAlignment"
+              }
+            },
+            {
+              "name": "computedStyle",
+              "type": {
+                "text": "CSSStyleDeclaration"
+              }
+            },
+            {
+              "name": "usePolyfill",
+              "default": "false"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "anchorPolyfill",
+          "declaration": {
+            "name": "anchorPolyfill",
+            "module": "src/anchorPolyfill.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "anchorAlignmentValues",
+          "type": {
+            "text": "[\n  'top-left',\n  'top-right',\n  'bottom-left',\n  'bottom-right',\n]"
+          },
+          "default": "[ 'top-left', 'top-right', 'bottom-left', 'bottom-right', ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "anchorAlignmentValues",
+          "declaration": {
+            "name": "anchorAlignmentValues",
+            "module": "src/common.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/dropdown.css",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/Dropdown.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/index.es.js

@@ -1,61 +1,32 @@
-var x = (o) => {
-  throw TypeError(o);
-};
-var b = (o, t, e) => t.has(o) || x("Cannot " + e);
-var s = (o, t, e) => (b(o, t, "read from private field"), e ? e.call(o) : t.get(o)), c = (o, t, e) => t.has(o) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), u = (o, t, e, i) => (b(o, t, "write to private field"), i ? i.call(o, e) : t.set(o, e), e), f = (o, t, e) => (b(o, t, "access private method"), e);
-import { WithExtraAttributes as C, log as P } from "@proximus/lavender-common";
-const S = ':host{position:relative}::slotted([slot="popover"]){position:absolute;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: 767px){::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: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', T = [
-  "top-left",
-  "top-right",
-  "bottom-left",
-  "bottom-right"
+import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t, log as n, propertyToAttributeSetter as r, renderTemplate as i } from "@proximus/lavender-common";
+//#region src/dropdown.css?inline
+var a = ":host{position:relative}::slotted([slot=popover]){border-radius:var(--px-radius-main,8px);background:var(--px-color-background-surface-light,#fff);margin:var(--px-spacing-xs-mobile) 0 0 0;width:auto;max-height:var(--px-popover-max-height);max-width:var(--px-popover-max-width);border:0;padding:0;position:fixed;right:0;box-shadow:0 20px 25px -5px #25252514}:host([grow]) ::slotted([slot=trigger]):after{padding-right:var(--px-padding-xs-mobile);right:0}:host([anchoralignment=top-left]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-mobile) 0;top:auto}:host([anchoralignment=top-right]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-mobile) 0;top:auto;left:auto}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){margin:var(--px-spacing-xs-mobile) 0 0 0;left:auto}@media screen and (width<=47.938rem){::slotted([slot=trigger]){width:100%;display:block}: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 (width>=48rem){::slotted([slot=popover]){margin:var(--px-spacing-xs-tablet) 0 0 0;width:auto;padding:0;right:auto}:host([anchoralignment=top-left]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-tablet) 0}:host([anchoralignment=top-right]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-tablet) 0}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){margin:var(--px-spacing-xs-tablet) 0 0 0}}@media screen and (width>=64.0625rem){::slotted([slot=popover]){margin:var(--px-spacing-xs-desktop) 0 0 0;width:auto;padding:0;right:auto}}@media screen and (width>=90.0625rem){::slotted([slot=popover]){width:auto;padding:0;right:auto}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){margin:var(--px-spacing-xs-desktop) 0 0 0}:host([anchoralignment=top-left]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-desktop) 0}:host([anchoralignment=top-right]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-desktop) 0}}:host([inverted]) ::slotted([slot=popover]){background:var(--px-color-background-surface-dark,#333)}", o = [
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
 ];
-function y(o, t, e = "bottom-left", i, d = !1) {
-  "anchorName" in document.documentElement.style && d === !1 || t.addEventListener("toggle", () => {
-    var v, $;
-    if (!o || !t)
-      return;
-    const r = o.getBoundingClientRect(), N = ((v = window.visualViewport) == null ? void 0 : v.height) ?? window.innerHeight, n = (($ = window.visualViewport) == null ? void 0 : $.width) ?? window.innerWidth, g = i.getPropertyValue("--px-padding-s-mobile") || "16px", k = parseInt(
-      (i.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
-    );
-    ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${g} + ${N - r.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = n < 768 ? `${g}px` : `${r.left}px` : t.style.right = n < 768 ? `${g}px` : `${n - r.right}px`) : (t.style.top = `${r.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = n < 768 ? `${g}px` : `${r.left}px` : t.style.right = n < 768 ? `${g}px` : `${n - r.right - k}px`);
-  });
+//#endregion
+//#region src/anchorPolyfill.ts
+function s(e, t, n = "bottom-left", r, i = !1) {
+	"anchorName" in document.documentElement.style && i === !1 || t.addEventListener("toggle", () => {
+		if (!e || !t) return;
+		let i = e.getBoundingClientRect(), a = window.visualViewport?.height ?? window.innerHeight, o = window.visualViewport?.width ?? window.innerWidth, s = r.getPropertyValue("--px-padding-s-mobile") || "16px", c = parseInt((r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", ""));
+		["top-left", "top-right"].includes(n) ? (t.style.bottom = `calc( ${s} + ${a - i.top - window.scrollY}px)`, t.style.top = "auto", n === "top-left" ? t.style.left = o < 768 ? `${s}px` : `${i.left}px` : t.style.right = o < 768 ? `${s}px` : `${o - i.right}px`) : (t.style.top = `${i.bottom + window.scrollY}px`, n === "bottom-left" ? t.style.left = o < 768 ? `${s}px` : `${i.left}px` : t.style.right = o < 768 ? `${s}px` : `${o - i.right - c}px`);
+	});
 }
-const w = new CSSStyleSheet();
-w.replaceSync(S);
-const m = "bottom-left";
-var p, A, l, a, h, E;
-class L extends C {
-  constructor() {
-    super(w);
-    c(this, p);
-    c(this, l);
-    c(this, a);
-    c(this, h);
-    this.template = () => `
-  <style>${this.css}</style>
-  <slot name="trigger"></slot>
-  <slot name="popover"></slot>`, this.isAboutToClose = !1, u(this, l, () => {
-      this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
-    }), u(this, a, () => {
-      this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
-    }), u(this, h, () => {
-      this.$popoverElement.matches(":popover-open") || setTimeout(() => {
-        this.isAboutToClose = !1;
-      });
-    }), this.shadowRoot.innerHTML = this.template();
-  }
-  /**
-   * Instance level styling for the dropdown component.
-   * This is used to set the anchor name and position of the popover.
-   * @private
-   */
-  get css() {
-    return `::slotted([slot='trigger']) {
+/* v8 ignore end */
+//#endregion
+//#region src/Dropdown.ts
+var c = new CSSStyleSheet();
+c.replaceSync(a);
+var l = "bottom-left", u = class extends e {
+	get css() {
+		return `::slotted([slot='trigger']) {
       anchor-name: ${this.anchorName};
     }
     :host([anchoralignment="bottom-left"]) {
-      ::slotted([slot="popover"]) {
+      ::slotted([popover]) {
         position-anchor: ${this.anchorName};
         top: anchor(${this.anchorName} bottom);
         left: anchor(${this.anchorName} left);
@@ -65,113 +36,158 @@ class L extends C {
       ::slotted([slot="popover"]) {
         position-anchor: ${this.anchorName};
         top: anchor(${this.anchorName} bottom);
-        right: calc(anchor(${this.anchorName} right) - var(--px-size-icon-xs));
+        right: anchor(${this.anchorName} right);
       }
     }
     :host([anchoralignment="top-left"]) {
       ::slotted([slot="popover"]) {
         position-anchor: ${this.anchorName};
-        bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
+        bottom: anchor(${this.anchorName} top);
         left: anchor(${this.anchorName} left);
       } 
     }
     :host([anchoralignment="top-right"]) {
       ::slotted([slot="popover"]) {
         position-anchor: ${this.anchorName};
-        bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
+        bottom: anchor(${this.anchorName} top);
         right: anchor(${this.anchorName} right);
       }
     }`;
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "id",
-      "anchoralignment",
-      "use-polyfill"
-    ];
-  }
-  connectedCallback() {
-    this.getAttribute("id") || this.setAttribute(
-      "id",
-      `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
-    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", m), y(
-      this.$trigger,
-      this.$popoverElement,
-      this.anchorAlignment,
-      getComputedStyle(this),
-      this.usePolyfill
-    );
-  }
-  attributeChangedCallback(e, i, d) {
-    if (i !== d)
-      switch (e) {
-        case "id":
-          this.initPopover();
-          break;
-        case "use-polyfill":
-          y(
-            this.$trigger,
-            this.$popoverElement,
-            this.anchorAlignment,
-            getComputedStyle(this),
-            this.usePolyfill
-          );
-          break;
-        default:
-          super.attributeChangedCallback(e, i, d);
-          break;
-      }
-  }
-  initPopover() {
-    this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, f(this, p, A).call(this), f(this, p, E).call(this));
-  }
-  get popoverId() {
-    return `${this.getAttribute("id")}-popover`;
-  }
-  get anchorName() {
-    return `--${this.getAttribute("id")}-anchor`;
-  }
-  get $style() {
-    return this.shadowRoot.querySelector("style");
-  }
-  get $trigger() {
-    return this.querySelector('[slot="trigger"]');
-  }
-  get $popoverElement() {
-    return this.querySelector('[slot="popover"]');
-  }
-  get anchorAlignment() {
-    return this.getAttribute("anchoralignment") || m;
-  }
-  set anchorAlignment(e) {
-    T.includes(e) ? this.setAttribute("anchoralignment", e) : (P(
-      `Invalid anchor alignment value: ${e}. Using default ${m}.`
-    ), this.setAttribute("anchoralignment", m));
-  }
-  get usePolyfill() {
-    return this.hasAttribute("use-polyfill");
-  }
-  set usePolyfill(e) {
-    e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
-  }
-}
-p = new WeakSet(), A = function() {
-  this.isAboutToClose = !1, this.$trigger.removeEventListener("click", s(this, l)), this.$popoverElement.removeEventListener(
-    "beforetoggle",
-    s(this, a)
-  ), this.$popoverElement.removeEventListener("toggle", s(this, h));
-}, l = new WeakMap(), a = new WeakMap(), h = new WeakMap(), /**
- * Handles the manual display of the popover when the trigger is clicked.
- * This is necessary for cases where the trigger is not a button or input element.
- * This method adds event listeners to the trigger element to toggle the popover.
- * It also manages the state of whether the popover is about to close or not to avoid
- * race conditions when the popover is toggled and the trigger click event is fired.
- */
-E = function() {
-  this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", s(this, l)), this.$popoverElement.addEventListener("beforetoggle", s(this, a)), this.$popoverElement.addEventListener("toggle", s(this, h)));
-};
-customElements.get("px-dropdown") || customElements.define("px-dropdown", L);
-export {
-  L as Dropdown
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"id",
+			"anchoralignment",
+			"use-polyfill",
+			"manual-toggle",
+			"popover-height",
+			"popover-max-height",
+			"popover-max-width",
+			"inverted"
+		];
+	}
+	constructor() {
+		super(c), this.template = () => `
+  <style>${this.css}</style>
+  <slot name="trigger"></slot>
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, this.triggerPopoverDisplay = () => {
+			this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.manualToggle || (this.$trigger.ariaExpanded = "true"));
+		}, this.showPopover = () => {
+			this.isAboutToClose || this.$popoverElement.showPopover();
+		}, this.hidePopover = () => {
+			this.$popoverElement.hidePopover();
+		}, this.#t = () => {
+			this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.manualToggle || (this.$trigger.ariaExpanded = "false"));
+		}, this.#n = () => {
+			this.$popoverElement.matches(":popover-open") || setTimeout(() => {
+				this.isAboutToClose = !1;
+			});
+		}, i(this.shadowRoot, this.template());
+	}
+	connectedCallback() {
+		this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", l), s(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
+	}
+	#e() {
+		this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener("beforetoggle", this.#t), this.$popoverElement.removeEventListener("toggle", this.#n);
+	}
+	#t;
+	#n;
+	#r() {
+		this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", this.#t), this.$popoverElement.addEventListener("toggle", this.#n));
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "id":
+				this.initPopover();
+				break;
+			case "use-polyfill":
+				s(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
+				break;
+			case "manual-toggle":
+				n != null && this.$trigger?.removeAttribute("aria-expanded");
+				break;
+			case "popover-height":
+			case "popover-max-height":
+				this.updatePopoverMaxHeight(n);
+				break;
+			case "popover-max-width":
+				this.updatePopoverMaxWidth(n);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updatePopoverMaxHeight(e) {
+		e ? this.$popoverElement.style.setProperty("--px-popover-max-height", e) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
+	}
+	updatePopoverMaxWidth(e) {
+		e ? this.$popoverElement.style.setProperty("--px-popover-max-width", e) : this.$popoverElement.style.removeProperty("--px-popover-max-width");
+	}
+	initPopover() {
+		if (this.$trigger) {
+			this.$trigger.setAttribute("popovertarget", this.popoverId);
+			let e = this.getAttribute("id");
+			e && this.$trigger.setAttribute("aria-controls", e), this.hasAttribute("manual-toggle") || this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, this.#e(), this.#r();
+		}
+	}
+	get popoverId() {
+		return `${this.getAttribute("id")}-popover`;
+	}
+	get anchorName() {
+		return `--${this.getAttribute("id")}-anchor`;
+	}
+	get $style() {
+		return this.shadowRoot.querySelector("style");
+	}
+	get $trigger() {
+		return this.querySelector("[slot=\"trigger\"]");
+	}
+	get $popoverElement() {
+		return this.querySelector("[slot=\"popover\"]");
+	}
+	get anchorAlignment() {
+		return this.getAttribute("anchoralignment") || l;
+	}
+	set anchorAlignment(e) {
+		o.includes(e) ? this.setAttribute("anchoralignment", e) : (n(`Invalid anchor alignment value: ${e}. Using default ${l}.`), this.setAttribute("anchoralignment", l));
+	}
+	get usePolyfill() {
+		return this.hasAttribute("use-polyfill");
+	}
+	set usePolyfill(e) {
+		e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
+	}
+	get manualToggle() {
+		return this.hasAttribute("manual-toggle");
+	}
+	set manualToggle(e) {
+		e ? this.setAttribute("manual-toggle", "") : this.removeAttribute("manual-toggle");
+	}
+	get popoverHeight() {
+		return this.getAttribute("popover-height");
+	}
+	set popoverHeight(e) {
+		r(this, "popover-height", e);
+	}
+	get popoverMaxHeight() {
+		return this.getAttribute("popover-max-height");
+	}
+	set popoverMaxHeight(e) {
+		r(this, "popover-max-height", e);
+	}
+	get popoverMaxWidth() {
+		return this.getAttribute("popover-max-width");
+	}
+	set popoverMaxWidth(e) {
+		r(this, "popover-max-width", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		t(this, "inverted", e);
+	}
 };
+customElements.get("px-dropdown") || customElements.define("px-dropdown", u);
+//#endregion
+export { u as Dropdown };

package/dist/vscode.css-custom-data.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}

package/dist/vscode.html-custom-data.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "px-dropdown",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "id", "values": [] },
+        { "name": "anchoralignment", "values": [] },
+        { "name": "use-polyfill", "values": [] },
+        { "name": "manual-toggle", "values": [] },
+        { "name": "popover-height", "values": [] },
+        { "name": "popover-max-height", "values": [] },
+        { "name": "popover-max-width", "values": [] },
+        { "name": "inverted", "values": [] }
+      ],
+      "references": []
+    }
+  ]
+}

package/dist/web-types.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "@proximus/lavender-dropdown",
+  "version": "2.0.0-alpha.210",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "px-dropdown",
+          "description": "\n\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "id", "value": { "type": "string" } },
+            { "name": "anchoralignment", "value": { "type": "string" } },
+            { "name": "use-polyfill", "value": { "type": "string" } },
+            { "name": "manual-toggle", "value": { "type": "string" } },
+            { "name": "popover-height", "value": { "type": "string" } },
+            { "name": "popover-max-height", "value": { "type": "string" } },
+            { "name": "popover-max-width", "value": { "type": "string" } },
+            { "name": "inverted", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "triggerPopoverDisplay" },
+              { "name": "showPopover" },
+              { "name": "hidePopover" },
+              { "name": "$trigger" },
+              { "name": "$popoverElement" },
+              { "name": "anchorAlignment", "type": "AnchorAlignment" },
+              { "name": "usePolyfill" },
+              { "name": "manualToggle" },
+              { "name": "popoverHeight" },
+              { "name": "popoverMaxHeight" },
+              { "name": "popoverMaxWidth" },
+              { "name": "inverted" }
+            ],
+            "events": []
+          }
+        }
+      ]
+    },
+    "css": {
+      "properties": [],
+      "pseudo-elements": []
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-dropdown",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.210",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"