@sebgroup/green-core 1.0.0-beta.8 → 1.0.0

package/index.js

@@ -37,7 +37,7 @@ import { property as property5 } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when as when2 } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
+import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
 import { msg, str, updateWhenLocaleChanges } from "@lit/localize";
 import "reflect-metadata";
 
@@ -119,10 +119,31 @@ function observeLightDOM() {
   };
 }
 
+// libs/core/src/utils/decorators/watch-media-query.ts
+function watchMediaQuery(q) {
+  return (proto, _propertyKey, descriptor) => {
+    const mediaQuery = window.matchMedia(q);
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      connectedCallback?.call(this);
+      const listener = (e) => {
+        descriptor.value?.call(this, e.matches);
+      };
+      mediaQuery.addEventListener("change", listener);
+      this.disconnectedCallback = function() {
+        disconnectedCallback?.call(this);
+        mediaQuery.removeEventListener("change", listener);
+      };
+      descriptor.value?.call(this, mediaQuery.matches);
+    };
+  };
+}
+
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-00499f";
+var VER_SUFFIX = "-b7215a";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -130,6 +151,8 @@ var gdsCustomElement = (tagName) => {
   }
   const versionedTagName = tagName + VER_SUFFIX;
   elementLookupTable.set(tagName, versionedTagName);
+  if (customElements.get(versionedTagName))
+    return (_classOrDescriptor) => false;
   return customElement(versionedTagName);
 };
 var templateCache = /* @__PURE__ */ new WeakMap();
@@ -173,15 +196,17 @@ import { property as property2 } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 // libs/core/src/utils/helpers/transitional-styles.ts
-var TransitionalStyles = class {
+var TransitionalStyles = class _TransitionalStyles {
   constructor() {
     this.sheets = /* @__PURE__ */ new Map();
     this.elements = /* @__PURE__ */ new Map();
   }
   static get instance() {
-    if (!globalThis.__gdsTransitionalStyles)
-      globalThis.__gdsTransitionalStyles = new TransitionalStyles();
-    return globalThis.__gdsTransitionalStyles;
+    if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
+      globalThis.__gdsTransitionalStyles = {
+        [VER_SUFFIX]: new _TransitionalStyles()
+      };
+    return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
   }
   apply(element, styleKey) {
     const sheet = this.sheets.get(styleKey);
@@ -381,6 +406,7 @@ var GdsListbox = class extends LitElement2 {
   constructor() {
     super();
     this.multiple = false;
+    this.compareWith = (a, b) => a === b;
     __privateAdd(this, _slotRef, createRef());
     __privateAdd(this, _handleSelect, (e) => {
       const option = e.target;
@@ -478,7 +504,7 @@ var GdsListbox = class extends LitElement2 {
   }
   set selection(values) {
     this.options.forEach((el) => {
-      el.selected = values.includes(el.value) || values.includes(el);
+      el.selected = values.some((v) => this.compareWith(v, el.value));
     });
   }
   connectedCallback() {
@@ -520,6 +546,9 @@ __decorateClass([
     }
   })
 ], GdsListbox.prototype, "multiple", 2);
+__decorateClass([
+  property2()
+], GdsListbox.prototype, "compareWith", 2);
 __decorateClass([
   watch("multiple")
 ], GdsListbox.prototype, "_rerenderOptions", 1);
@@ -530,8 +559,166 @@ GdsListbox = __decorateClass([
 // libs/core/src/primitives/popover/popover.ts
 import { LitElement as LitElement3, html as html3, unsafeCSS as unsafeCSS3 } from "lit";
 import { property as property3 } from "lit/decorators.js";
+import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 
+// libs/core/src/primitives/popover/topLayerOverTransforms.middleware.ts
+var topLayerOverTransforms = () => ({
+  name: "topLayer",
+  async fn(middlewareArguments) {
+    const {
+      x,
+      y,
+      elements: { reference, floating }
+    } = middlewareArguments;
+    let onTopLayer = false;
+    let topLayerIsFloating = false;
+    const diffCoords = {
+      x: 0,
+      y: 0
+    };
+    try {
+      onTopLayer = onTopLayer || floating.matches(":open");
+    } catch (e) {
+    }
+    try {
+      onTopLayer = onTopLayer || floating.matches(":modal");
+    } catch (e) {
+    }
+    topLayerIsFloating = onTopLayer;
+    if (!onTopLayer) {
+      const dialogAncestorQueryEvent = new Event("floating-ui-dialog-test", {
+        composed: true,
+        bubbles: true
+      });
+      floating.addEventListener(
+        "floating-ui-dialog-test",
+        (event) => {
+          event.composedPath().forEach((el) => {
+            if (el === floating || el.localName !== "dialog")
+              return;
+            try {
+              onTopLayer = onTopLayer || el.matches(":modal");
+              if (onTopLayer) {
+              }
+            } catch (e) {
+            }
+          });
+        },
+        { once: true }
+      );
+      floating.dispatchEvent(dialogAncestorQueryEvent);
+    }
+    let overTransforms = false;
+    const containingBlock = getContainingBlock(reference);
+    if (containingBlock !== null && !isWindow(containingBlock)) {
+      overTransforms = true;
+    }
+    if (onTopLayer && overTransforms) {
+      const rect = containingBlock.getBoundingClientRect();
+      diffCoords.x = rect.x;
+      diffCoords.y = rect.y;
+    }
+    if (onTopLayer && topLayerIsFloating) {
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+    if (onTopLayer) {
+      return {
+        x,
+        y,
+        data: diffCoords
+      };
+    }
+    return {
+      x: x - diffCoords.x,
+      y: y - diffCoords.y,
+      data: diffCoords
+    };
+  }
+});
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      const parent = currentNode.assignedSlot ? currentNode.assignedSlot : currentNode.parentNode;
+      currentNode = isShadowRoot(parent) ? parent.host : parent;
+    }
+  }
+  return null;
+}
+function isLastTraversableNode(node) {
+  return ["html", "body", "#document"].includes(getNodeName(node));
+}
+function isContainingBlock(element) {
+  const isFirefox = /firefox/i.test(getUAString());
+  if (element.tagName === "dialog") {
+    return true;
+  }
+  const css5 = getComputedStyle(element);
+  return css5.transform !== "none" || css5.perspective !== "none" || css5.contain === "paint" || ["transform", "perspective"].includes(css5.willChange) || isFirefox && css5.willChange === "filter" || isFirefox && (css5.filter ? css5.filter !== "none" : false);
+}
+function getUAString() {
+  const uaData = navigator.userAgentData;
+  if (uaData?.brands) {
+    return uaData.brands.map((item) => `${item.brand}/${item.version}`).join(" ");
+  }
+  return navigator.userAgent;
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html") {
+    return node;
+  }
+  return (
+    // this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    node.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    node.parentNode || // DOM Element detected
+    (isShadowRoot(node) ? node.host : null) || // ShadowRoot detected
+    getDocumentElement(node)
+  );
+}
+function getNodeName(node) {
+  return isWindow(node) ? "" : node ? (node.nodeName || "").toLowerCase() : "";
+}
+function getDocumentElement(node) {
+  return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
+}
+function isNode(value) {
+  return value instanceof getWindow(value).Node;
+}
+function isWindow(value) {
+  return value && value.document && value.location && value.alert && value.setInterval;
+}
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
+  if (!isWindow(node)) {
+    const ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+  return node;
+}
+function isShadowRoot(node) {
+  if (typeof ShadowRoot === "undefined") {
+    return false;
+  }
+  const OwnElement = getWindow(node).ShadowRoot;
+  const testNode = node;
+  return node instanceof OwnElement || testNode instanceof ShadowRoot;
+}
+function isHTMLElement(value) {
+  return value instanceof getWindow(value).HTMLElement;
+}
+
 // libs/core/src/primitives/popover/popover.styles.ts
 import { css as css3 } from "lit";
 var style3 = css3`
@@ -544,15 +731,23 @@ var style3 = css3`
 var popover_styles_default = style3;
 
 // libs/core/src/primitives/popover/popover.ts
-var _autoPositionCleanup, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _triggerKeyDownListener, _setOpen, setOpen_fn;
+var _dialogElementRef, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _autoPositionCleanup, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
 var GdsPopover = class extends LitElement3 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _registerTriggerEvents);
     __privateAdd(this, _unregisterTriggerEvents);
-    __privateAdd(this, _setOpen);
+    __privateAdd(this, _registerAutoPositioning);
     this.open = false;
     this.trigger = void 0;
+    this.label = void 0;
+    __privateAdd(this, _dialogElementRef, createRef2());
+    __privateAdd(this, _handleCloseButton, (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.open = false;
+      setTimeout(() => this.trigger?.focus(), 250);
+    });
     __privateAdd(this, _autoPositionCleanup, void 0);
     /**
      * ArrowDown on the trigger element will trigger the popover by default, and escape will close it.
@@ -560,14 +755,29 @@ var GdsPopover = class extends LitElement3 {
     __privateAdd(this, _triggerKeyDownListener, (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        __privateMethod(this, _setOpen, setOpen_fn).call(this, true);
-        const firstSlottedChild = this.shadowRoot?.querySelector("slot")?.assignedElements()[0];
-        this.updateComplete.then(() => {
-          firstSlottedChild?.focus();
-        });
+        this.open = true;
       }
       if (e.key === "Escape") {
-        __privateMethod(this, _setOpen, setOpen_fn).call(this, false);
+        this.open = false;
+      }
+    });
+    /**
+     * Move focus to the first slotted child.
+     */
+    __privateAdd(this, _focusFirstSlottedChild, () => {
+      const firstSlottedChild = this.shadowRoot?.querySelector("slot")?.assignedElements()[0];
+      this.updateComplete.then(() => {
+        firstSlottedChild?.focus();
+      });
+    });
+    __privateAdd(this, _clickOutsideListener, (e) => {
+      const dialog = __privateGet(this, _dialogElementRef).value;
+      if (dialog && this.open) {
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
+        if (!isInDialog) {
+          this.open = false;
+        }
       }
     });
   }
@@ -578,10 +788,11 @@ var GdsPopover = class extends LitElement3 {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-popover");
     __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
-    this._updateHidden();
+    this._handleOpenChange();
     this.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
-        __privateMethod(this, _setOpen, setOpen_fn).call(this, false);
+        this.open = false;
+        e.stopImmediatePropagation();
       }
     });
   }
@@ -590,31 +801,68 @@ var GdsPopover = class extends LitElement3 {
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html3` <slot></slot> `;
+    return html3`<dialog ${ref2(__privateGet(this, _dialogElementRef))}>
+      <header>
+        <h2>${this.label}</h2>
+        <button class="close" @click=${__privateGet(this, _handleCloseButton)}>
+          <i></i>
+        </button>
+      </header>
+      <slot></slot>
+    </dialog>`;
   }
-  _updateHidden() {
+  _handleOpenChange() {
     this.setAttribute("aria-hidden", String(!this.open));
     this.hidden = !this.open;
+    this.updateComplete.then(() => {
+      if (this.open) {
+        __privateGet(this, _dialogElementRef).value?.showModal();
+        __privateGet(this, _focusFirstSlottedChild).call(this);
+        setTimeout(
+          () => __privateGet(this, _dialogElementRef).value?.addEventListener(
+            "click",
+            __privateGet(this, _clickOutsideListener)
+          ),
+          0
+        );
+      } else {
+        __privateGet(this, _dialogElementRef).value?.close();
+        __privateGet(this, _dialogElementRef).value?.removeEventListener(
+          "click",
+          __privateGet(this, _clickOutsideListener)
+        );
+      }
+    });
+    this.dispatchEvent(
+      new CustomEvent("gds-ui-state", {
+        detail: { open: this.open },
+        bubbles: true,
+        composed: false
+      })
+    );
+  }
+  _handleMobileLayout(matches) {
+    var _a;
+    if (matches) {
+      (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
+      __privateGet(this, _dialogElementRef).value?.style.removeProperty("left");
+      __privateGet(this, _dialogElementRef).value?.style.removeProperty("top");
+      this.updateComplete.then(() => {
+        if (this.open)
+          __privateGet(this, _dialogElementRef).value?.showModal();
+      });
+    } else {
+      this.updateComplete.then(() => {
+        __privateMethod(this, _registerAutoPositioning, registerAutoPositioning_fn).call(this);
+      });
+    }
   }
 };
-_autoPositionCleanup = new WeakMap();
+_dialogElementRef = new WeakMap();
+_handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
-  if (!this.trigger)
-    return;
-  this.trigger.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
-  const referenceEl = this.trigger;
-  __privateSet(this, _autoPositionCleanup, autoUpdate(referenceEl, this, () => {
-    computePosition(referenceEl, this, {
-      placement: "bottom-start",
-      middleware: [offset(8), flip()]
-    }).then(({ x, y }) => {
-      Object.assign(this.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-    });
-  }));
+  this.trigger?.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
 };
 _unregisterTriggerEvents = new WeakSet();
 unregisterTriggerEvents_fn = function() {
@@ -622,18 +870,30 @@ unregisterTriggerEvents_fn = function() {
   this.trigger?.removeEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
   (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
 };
-_triggerKeyDownListener = new WeakMap();
-_setOpen = new WeakSet();
-setOpen_fn = function(open) {
-  this.open = open;
-  this.dispatchEvent(
-    new CustomEvent("gds-ui-state", {
-      detail: { open },
-      bubbles: true,
-      composed: false
-    })
-  );
+_autoPositionCleanup = new WeakMap();
+_registerAutoPositioning = new WeakSet();
+registerAutoPositioning_fn = function() {
+  const referenceEl = this.trigger;
+  const floatingEl = __privateGet(this, _dialogElementRef).value;
+  if (!referenceEl || !floatingEl)
+    return;
+  __privateSet(this, _autoPositionCleanup, autoUpdate(referenceEl, floatingEl, () => {
+    computePosition(referenceEl, floatingEl, {
+      placement: "bottom-start",
+      middleware: [offset(8), flip(), topLayerOverTransforms()],
+      strategy: "fixed"
+    }).then(
+      ({ x, y }) => Object.assign(floatingEl.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        minWidth: `${referenceEl.offsetWidth}px`
+      })
+    );
+  }));
 };
+_triggerKeyDownListener = new WeakMap();
+_focusFirstSlottedChild = new WeakMap();
+_clickOutsideListener = new WeakMap();
 GdsPopover.styles = unsafeCSS3(popover_styles_default);
 __decorateClass([
   property3({ type: Boolean, reflect: true })
@@ -641,12 +901,18 @@ __decorateClass([
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "trigger", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "label", 2);
 __decorateClass([
   watch("trigger")
 ], GdsPopover.prototype, "_handleTriggerChanged", 1);
 __decorateClass([
   watch("open")
-], GdsPopover.prototype, "_updateHidden", 1);
+], GdsPopover.prototype, "_handleOpenChange", 1);
+__decorateClass([
+  watchMediaQuery("(max-width: 576px)")
+], GdsPopover.prototype, "_handleMobileLayout", 1);
 GdsPopover = __decorateClass([
   gdsCustomElement("gds-popover")
 ], GdsPopover);
@@ -654,52 +920,54 @@ GdsPopover = __decorateClass([
 // libs/core/src/components/form-control.ts
 import { LitElement as LitElement4 } from "lit";
 import { property as property4 } from "lit/decorators.js";
-var _internals, _handleFormReset;
 var GdsFormControlElement = class extends LitElement4 {
   constructor() {
     super();
-    __privateAdd(this, _internals, void 0);
     this.invalid = false;
     this.name = "";
     /**
      * Event handler for the form reset event.
      */
-    __privateAdd(this, _handleFormReset, () => {
+    this.#handleFormReset = () => {
       this.value = void 0;
-    });
-    __privateSet(this, _internals, this.attachInternals());
+    };
+    this.#internals = this.attachInternals();
+  }
+  #internals;
+  static {
+    this.formAssociated = true;
   }
   get form() {
-    return __privateGet(this, _internals).form;
+    return this.#internals.form;
   }
   get type() {
     return getUnscopedTagName(this.localName) || "gds-form-control";
   }
   get validity() {
-    return __privateGet(this, _internals).validity;
+    return this.#internals.validity;
   }
   get validationMessage() {
-    return __privateGet(this, _internals).validationMessage;
+    return this.#internals.validationMessage;
   }
   get willValidate() {
-    return __privateGet(this, _internals).willValidate;
+    return this.#internals.willValidate;
   }
   checkValidity() {
-    return __privateGet(this, _internals).checkValidity();
+    return this.#internals.checkValidity();
   }
   reportValidity() {
-    return __privateGet(this, _internals).reportValidity();
+    return this.#internals.reportValidity();
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateGet(this, _internals).form?.addEventListener("reset", __privateGet(this, _handleFormReset));
+    this.#internals.form?.addEventListener("reset", this.#handleFormReset);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateGet(this, _internals).form?.removeEventListener("reset", __privateGet(this, _handleFormReset));
+    this.#internals.form?.removeEventListener("reset", this.#handleFormReset);
   }
   __handleValidityChange() {
-    __privateGet(this, _internals).setValidity(
+    this.#internals.setValidity(
       {
         badInput: false,
         customError: this.invalid,
@@ -716,12 +984,10 @@ var GdsFormControlElement = class extends LitElement4 {
     );
   }
   __handleValueChange() {
-    __privateGet(this, _internals).setFormValue(this.value);
+    this.#internals.setFormValue(this.value);
   }
+  #handleFormReset;
 };
-_internals = new WeakMap();
-_handleFormReset = new WeakMap();
-GdsFormControlElement.formAssociated = true;
 __decorateClass([
   property4({
     type: Boolean,
@@ -763,7 +1029,7 @@ var style4 = css4`
 var dropdown_styles_default = style4;
 
 // libs/core/src/components/dropdown/dropdown.ts
-var _listboxRef, _triggerRef, _searchInputRef, _optionElements, _listboxId, _triggerId, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleOptionFocusChange, _registerPopoverTrigger, registerPopoverTrigger_fn, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _autoCloseListener;
+var _listboxRef, _triggerRef, _searchInputRef, _optionElements, _listboxId, _triggerId, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _registerPopoverTrigger, registerPopoverTrigger_fn, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 var GdsDropdown = class extends GdsFormControlElement {
   constructor() {
     super();
@@ -785,10 +1051,12 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.open = false;
     this.searchable = false;
     this.multiple = false;
+    this.compareWith = (a, b) => a === b;
+    this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
     // Private members
-    __privateAdd(this, _listboxRef, createRef2());
-    __privateAdd(this, _triggerRef, createRef2());
-    __privateAdd(this, _searchInputRef, createRef2());
+    __privateAdd(this, _listboxRef, createRef3());
+    __privateAdd(this, _triggerRef, createRef3());
+    __privateAdd(this, _searchInputRef, createRef3());
     __privateAdd(this, _optionElements, void 0);
     __privateAdd(this, _listboxId, randomId());
     __privateAdd(this, _triggerId, randomId());
@@ -798,41 +1066,58 @@ var GdsDropdown = class extends GdsFormControlElement {
      * @param e The keyboard event.
      */
     __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
-      const input = e.target;
+      const input = __privateGet(this, _searchInputRef).value;
       const options = Array.from(__privateGet(this, _optionElements));
       options.forEach((o) => o.hidden = false);
       if (!input.value)
         return;
       const filteredOptions = options.filter(
-        (o) => !o.innerHTML.toLowerCase().includes(input.value.toLowerCase())
+        (o) => !this.searchFilter(input.value, o)
       );
       filteredOptions.forEach((o) => o.hidden = true);
     });
     /**
-     * Check for ArrowDown in the search field.
+     * Check for ArrowDown or Tab in the search field.
      * If found, focus should be moved to the listbox.
      */
     __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
-      if (e.key === "ArrowDown") {
+      if (e.key === "ArrowDown" || e.key === "Tab") {
+        e.preventDefault();
         __privateGet(this, _listboxRef).value?.focus();
         return;
       }
     });
+    /**
+     * Check for Tab in the listbox.
+     * If found, focus should be moved to the search field.
+     */
+    __privateAdd(this, _handleListboxKeyDown, (e) => {
+      if (e.key === "Tab" && this.searchable) {
+        e.preventDefault();
+        __privateGet(this, _searchInputRef).value?.focus();
+        return;
+      }
+    });
     __privateAdd(this, _handleOptionFocusChange, (e) => {
       const triggerButton = __privateGet(this, _triggerRef).value;
       if (triggerButton)
         triggerButton.ariaActiveDescendantElement = e.target;
     });
     /**
-     * A listener to close the dropdown when clicking outside of it,
-     * or when any other element recieves a keyup event.
+     * A listener to close the dropdown when any other element is focused.
      */
-    __privateAdd(this, _autoCloseListener, (e) => {
-      const isClickOutside = e instanceof MouseEvent && e.target instanceof Node && !this.contains(e.target);
+    __privateAdd(this, _blurCloseListener, (e) => {
       const isFocusOutside = e instanceof FocusEvent && e.relatedTarget && !this.contains(e.relatedTarget);
-      if (isClickOutside || isFocusOutside)
+      if (isFocusOutside)
         this.open = false;
     });
+    __privateAdd(this, _tabCloseListener, (e) => {
+      if (e.key === "Tab" && !this.searchable) {
+        e.preventDefault();
+        this.open = false;
+        __privateGet(this, _triggerRef).value?.focus();
+      }
+    });
     constrainSlots(this);
     updateWhenLocaleChanges(this);
     __privateSet(this, _optionElements, this.getElementsByTagName(
@@ -897,7 +1182,7 @@ var GdsDropdown = class extends GdsFormControlElement {
         aria-owns="${__privateGet(this, _listboxId)}"
         aria-controls="${__privateGet(this, _listboxId)}"
         aria-expanded="${this.open}"
-        ${ref2(__privateGet(this, _triggerRef))}
+        ${ref3(__privateGet(this, _triggerRef))}
       >
         <slot name="trigger">
           <span>${unsafeHTML(this.displayValue)}</span>
@@ -907,9 +1192,10 @@ var GdsDropdown = class extends GdsFormControlElement {
       <span class="form-info"><slot name="message"></slot></span>
 
       <gds-popover
+        .label=${this.label}
         .open=${this.open}
         @gds-ui-state=${(e) => this.open = e.detail.open}
-        ${ref2(__privateMethod(this, _registerPopoverTrigger, registerPopoverTrigger_fn))}
+        ${ref3(__privateMethod(this, _registerPopoverTrigger, registerPopoverTrigger_fn))}
       >
         ${when2(
       this.searchable,
@@ -917,7 +1203,7 @@ var GdsDropdown = class extends GdsFormControlElement {
             type="text"
             aria-label="${msg("Filter available options")}"
             placeholder="${msg("Search")}"
-            ${ref2(__privateGet(this, _searchInputRef))}
+            ${ref3(__privateGet(this, _searchInputRef))}
             @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
             @keyup=${__privateGet(this, _handleSearchFieldKeyUp)}
           />`
@@ -926,9 +1212,11 @@ var GdsDropdown = class extends GdsFormControlElement {
         <gds-listbox
           id="${__privateGet(this, _listboxId)}"
           .multiple="${ifDefined(this.multiple)}"
-          ${ref2(__privateGet(this, _listboxRef))}
+          .compareWith="${this.compareWith}"
+          ${ref3(__privateGet(this, _listboxRef))}
           @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
+          @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
           <slot gds-allow="gds-option"></slot>
         </gds-listbox>
@@ -937,6 +1225,7 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   _handleLightDOMChange() {
     this.requestUpdate();
+    this._handleValueChange();
     if (this.multiple)
       return;
     if (!this.value) {
@@ -960,12 +1249,12 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   _onOpenChange() {
     const open = this.open;
+    Array.from(__privateGet(this, _optionElements)).forEach((o) => o.hidden = !open);
     if (open)
       __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
     else {
       __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
       __privateGet(this, _searchInputRef).value && (__privateGet(this, _searchInputRef).value.value = "");
-      Array.from(__privateGet(this, _optionElements)).forEach((o) => o.hidden = false);
     }
     this.dispatchEvent(
       new CustomEvent("gds-ui-state", {
@@ -984,6 +1273,7 @@ _listboxId = new WeakMap();
 _triggerId = new WeakMap();
 _handleSearchFieldKeyUp = new WeakMap();
 _handleSearchFieldKeyDown = new WeakMap();
+_handleListboxKeyDown = new WeakMap();
 _handleOptionFocusChange = new WeakMap();
 _registerPopoverTrigger = new WeakSet();
 registerPopoverTrigger_fn = function(el) {
@@ -1014,17 +1304,18 @@ handleSelectionChange_fn = function() {
 };
 _registerAutoCloseListener = new WeakSet();
 registerAutoCloseListener_fn = function() {
-  window.addEventListener("click", __privateGet(this, _autoCloseListener));
-  this.addEventListener("blur", __privateGet(this, _autoCloseListener));
-  this.addEventListener("gds-blur", __privateGet(this, _autoCloseListener));
+  this.addEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("keydown", __privateGet(this, _tabCloseListener));
 };
 _unregisterAutoCloseListener = new WeakSet();
 unregisterAutoCloseListener_fn = function() {
-  window.removeEventListener("click", __privateGet(this, _autoCloseListener));
-  this.removeEventListener("blur", __privateGet(this, _autoCloseListener));
-  this.removeEventListener("gds-blur", __privateGet(this, _autoCloseListener));
+  this.removeEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("keydown", __privateGet(this, _tabCloseListener));
 };
-_autoCloseListener = new WeakMap();
+_blurCloseListener = new WeakMap();
+_tabCloseListener = new WeakMap();
 GdsDropdown.styles = dropdown_styles_default;
 GdsDropdown.shadowRootOptions = {
   mode: "open",
@@ -1042,6 +1333,12 @@ __decorateClass([
 __decorateClass([
   property5({ type: Boolean, reflect: true })
 ], GdsDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property5()
+], GdsDropdown.prototype, "compareWith", 2);
+__decorateClass([
+  property5()
+], GdsDropdown.prototype, "searchFilter", 2);
 __decorateClass([
   observeLightDOM()
 ], GdsDropdown.prototype, "_handleLightDOMChange", 1);
@@ -1057,6 +1354,7 @@ GdsDropdown = __decorateClass([
 export {
   GdsDropdown,
   GdsOption,
+  VER_SUFFIX,
   gdsCustomElement,
   getScopedTagName,
   getUnscopedTagName,