@sebgroup/green-core 1.1.1 → 1.2.0

package/index.js

@@ -9,9 +9,9 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg3) => {
+var __accessCheck = (obj, member, msg4) => {
   if (!member.has(obj))
-    throw TypeError("Cannot " + msg3);
+    throw TypeError("Cannot " + msg4);
 };
 var __privateGet = (obj, member, getter) => {
   __accessCheck(obj, member, "read from private field");
@@ -33,11 +33,10 @@ var __privateMethod = (obj, member, method) => {
 };
 
 // libs/core/src/components/dropdown/dropdown.ts
-import { property as property5 } from "lit/decorators.js";
+import { property as property5, query, queryAsync } 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 createRef3, ref as ref3 } from "lit/directives/ref.js";
 import { msg as msg2, str, updateWhenLocaleChanges } from "@lit/localize";
 import "reflect-metadata";
 
@@ -67,9 +66,6 @@ function constrainSlots(self) {
   });
 }
 
-// libs/core/src/utils/helpers/id.ts
-var randomId = () => "gds-" + Math.random().toString(36).substring(2, 9);
-
 // libs/core/src/utils/decorators/watch.ts
 function watch(propertyName, options) {
   const resolvedOptions = {
@@ -80,8 +76,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property6) => {
-        const key = property6;
+      watchedProperties.forEach((property7) => {
+        const key = property7;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -143,7 +139,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-2ca105";
+var VER_SUFFIX = "-91f802";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -167,7 +163,7 @@ function applyElementScoping(strings, ...values) {
 }
 var replaceTags = (inStr) => inStr.map((s) => {
   for (const [key, value] of elementLookupTable.entries()) {
-    s = s.split(key).join(value);
+    s = s.replace(new RegExp(`${key}(?![-a-z])`, "mg"), value);
   }
   return s;
 });
@@ -191,8 +187,8 @@ function getUnscopedTagName(tagName) {
 }
 
 // libs/core/src/primitives/listbox/listbox.ts
-import { LitElement as LitElement2 } from "lit";
-import { property as property2 } from "lit/decorators.js";
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 // libs/core/src/utils/helpers/transitional-styles.ts
@@ -229,224 +225,42 @@ var TransitionalStyles = class _TransitionalStyles {
   }
 };
 
-// libs/core/src/primitives/listbox/option.ts
-import { LitElement, html as html2 } from "lit";
-import { property } from "lit/decorators.js";
-import { when } from "lit/directives/when.js";
-import { classMap } from "lit/directives/class-map.js";
-
-// libs/core/src/primitives/listbox/option.styles.ts
-import { css } from "lit";
-var style = css`
-  :host {
-    padding: 0.5 1rem;
-    cursor: pointer;
-  }
-
-  :host(:hover) {
-    background-color: grey;
-  }
-`;
-var option_styles_default = style;
-
-// libs/core/src/primitives/listbox/option.ts
-import "reflect-metadata";
-var _hidden, _emitSelect, emitSelect_fn;
-var GdsOption = class extends LitElement {
-  constructor() {
-    super();
-    __privateAdd(this, _emitSelect);
-    __privateAdd(this, _hidden, false);
-    this.selected = false;
-    this.isPlaceholder = false;
-    this.onblur = (e) => {
-      this.setAttribute("tabindex", "-1");
-      this.dispatchEvent(
-        new FocusEvent("gds-blur", {
-          bubbles: true,
-          composed: true,
-          relatedTarget: e.relatedTarget
-        })
-      );
-    };
-    this.onfocus = (e) => {
-      this.dispatchEvent(
-        new FocusEvent("gds-focus", {
-          bubbles: true,
-          composed: true,
-          relatedTarget: e.relatedTarget
-        })
-      );
-    };
-    this.addEventListener("click", __privateMethod(this, _emitSelect, emitSelect_fn));
-    this.addEventListener("keydown", (e) => {
-      if (e.key !== "Enter" && e.key !== " ")
-        return;
-      e.preventDefault();
-      __privateMethod(this, _emitSelect, emitSelect_fn).call(this);
-    });
-  }
-  get hidden() {
-    return __privateGet(this, _hidden);
-  }
-  set hidden(value) {
-    if (this.isPlaceholder)
-      return;
-    __privateSet(this, _hidden, value === "true" || value === true);
-    this.setAttribute("aria-hidden", value.toString());
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "option");
-    if (this.isPlaceholder) {
-      __privateSet(this, _hidden, true);
-      this.setAttribute("aria-hidden", "true");
-    }
-    this.updateComplete.then(
-      () => TransitionalStyles.instance.apply(this, "gds-option")
-    );
-  }
-  get parentElement() {
-    return super.parentElement;
-  }
-  handlePlaceholderStatusChange() {
-    if (this.isPlaceholder) {
-      __privateSet(this, _hidden, true);
-      this.setAttribute("aria-hidden", "true");
-    } else {
-      __privateSet(this, _hidden, false);
-      this.setAttribute("aria-hidden", "false");
-    }
-  }
-  /**
-   * Focuses the option.
-   *
-   * @param options - Focus options
-   */
-  focus(options) {
-    this.setAttribute("tabindex", "0");
-    super.focus(options);
-    if (document.activeElement !== this) {
-      const iv = setInterval(() => {
-        if (document.activeElement === this)
-          clearInterval(iv);
-        super.focus(options);
-      }, 10);
-    }
-  }
-  render() {
-    const isMultiple = this.parentElement.multiple;
-    const checkbox = html2`<span
-      class="checkbox ${classMap({ checked: this.selected })}"
-    ></span>`;
-    if (!isMultiple) {
-      if (this.selected)
-        this.setAttribute("highlighted", "");
-      else
-        this.removeAttribute("highlighted");
-    }
-    return html2`${when(isMultiple, () => checkbox)}<slot></slot>`;
-  }
-};
-_hidden = new WeakMap();
-_emitSelect = new WeakSet();
-emitSelect_fn = function() {
-  this.dispatchEvent(
-    new CustomEvent("gds-select", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: this.value
-      }
-    })
-  );
-};
-GdsOption.styles = option_styles_default;
-__decorateClass([
-  property()
-], GdsOption.prototype, "value", 2);
-__decorateClass([
-  property({
-    attribute: "aria-hidden",
-    reflect: true
-  })
-], GdsOption.prototype, "hidden", 1);
-__decorateClass([
-  property({
-    attribute: "aria-selected",
-    reflect: true
-  })
-], GdsOption.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], GdsOption.prototype, "isPlaceholder", 2);
-__decorateClass([
-  watch("isplaceholder")
-], GdsOption.prototype, "handlePlaceholderStatusChange", 1);
-GdsOption = __decorateClass([
-  gdsCustomElement("gds-option")
-], GdsOption);
-
 // libs/core/src/primitives/listbox/listbox.ts
 import "reflect-metadata";
 
 // libs/core/src/primitives/listbox/listbox.styles.ts
-import { css as css2 } from "lit";
-var style2 = css2`
+import { css } from "lit";
+var style = css`
   :host {
     display: flex;
     flex-direction: column;
   }
 `;
-var listbox_styles_default = style2;
+var listbox_styles_default = style;
 
-// libs/core/src/primitives/listbox/listbox.ts
-var _slotRef, _handleSelect, _keyboardNavigationHandler;
-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;
-      if (this.multiple)
-        option.selected = !option.selected;
-      else {
-        option.selected = true;
-        Array.from(this.options).forEach((el) => {
-          if (el !== option)
-            el.selected = false;
-        });
-      }
-      ;
-      this.ariaActiveDescendantElement = option;
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          bubbles: false,
-          composed: false
-        })
-      );
-    });
-    __privateAdd(this, _keyboardNavigationHandler, (e) => {
-      if (!(e.target instanceof GdsOption))
+// libs/core/src/controllers/listbox-kb-nav-controller.ts
+var ListboxKbNavController = class {
+  constructor(host) {
+    this.#keyboardNavigationHandler = (e) => {
+      const targetItem = e.target;
+      if (!this.host.navigableItems.includes(targetItem))
         return;
       let handled = false;
       if (e.key === "ArrowDown") {
-        const nextOptionIndex = this.visibleOptionElements.indexOf(e.target) + 1;
-        const nextItem = this.visibleOptionElements[nextOptionIndex];
+        const nextItemIndex = this.host.navigableItems.indexOf(targetItem) + 1;
+        const nextItem = this.host.navigableItems[nextItemIndex];
         nextItem?.focus();
         handled = true;
       } else if (e.key === "ArrowUp") {
-        const prevOptionIndex = this.visibleOptionElements.indexOf(e.target) - 1;
-        const prevItem = this.visibleOptionElements[prevOptionIndex];
+        const prevOptionIndex = this.host.navigableItems.indexOf(targetItem) - 1;
+        const prevItem = this.host.navigableItems[prevOptionIndex];
         prevItem?.focus();
         handled = true;
       } else if (e.key === "Home") {
-        this.visibleOptionElements[0]?.focus();
+        this.host.navigableItems[0]?.focus();
         handled = true;
       } else if (e.key === "End") {
-        this.visibleOptionElements[this.visibleOptionElements.length - 1]?.focus();
+        this.host.navigableItems[this.host.navigableItems.length - 1]?.focus();
         handled = true;
       } else {
         const key = e.key.toLowerCase();
@@ -456,7 +270,7 @@ var GdsListbox = class extends LitElement2 {
         const isLetter = key >= "a" && key <= "z";
         const isNumber = key >= "0" && key <= "9";
         if (isLetter || isNumber) {
-          const firstMatch = this.visibleOptionElements.find((el) => {
+          const firstMatch = this.host.navigableItems.find((el) => {
             const text = el.textContent?.trim().toLowerCase();
             return text?.startsWith(key);
           });
@@ -468,19 +282,68 @@ var GdsListbox = class extends LitElement2 {
         e.preventDefault();
         e.stopPropagation();
       }
+    };
+    ;
+    (this.host = host).addController(this);
+  }
+  hostConnected() {
+    this.host.addEventListener("keydown", this.#keyboardNavigationHandler);
+  }
+  hostDisconnected() {
+    this.host.removeEventListener("keydown", this.#keyboardNavigationHandler);
+  }
+  #keyboardNavigationHandler;
+};
+
+// libs/core/src/utils/helpers/unwrap-slots.ts
+function unwrap(slotRef) {
+  let slot = slotRef;
+  while (slot.assignedElements().length > 0 && slot.assignedElements()[0].nodeName === "SLOT") {
+    slot = slot.assignedElements()[0];
+  }
+  return slot;
+}
+
+// libs/core/src/primitives/listbox/listbox.ts
+var _slotRef, _handleSelect;
+var GdsListbox = class extends LitElement {
+  constructor() {
+    super();
+    this.multiple = false;
+    this.compareWith = (a, b) => a === b;
+    __privateAdd(this, _slotRef, createRef());
+    __privateAdd(this, _handleSelect, (e) => {
+      const option = e.target;
+      if (this.multiple)
+        option.selected = !option.selected;
+      else {
+        option.selected = true;
+        Array.from(this.options).forEach((el) => {
+          if (el !== option)
+            el.selected = false;
+        });
+      }
+      ;
+      this.ariaActiveDescendantElement = option;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: false,
+          composed: false
+        })
+      );
     });
+    new ListboxKbNavController(this);
+  }
+  get navigableItems() {
+    return this.visibleOptionElements;
   }
   /**
    * Returns a list of all `gds-option` elements in the listbox.
    */
   get options() {
-    let slot = __privateGet(this, _slotRef).value;
-    if (!slot)
+    if (!__privateGet(this, _slotRef).value)
       return [];
-    while (slot.assignedElements().length > 0 && slot.assignedElements()[0].nodeName === "SLOT") {
-      slot = slot.assignedElements()[0];
-    }
-    return slot.assignedElements().filter(
+    return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
       (o) => !o.hasAttribute("isplaceholder")
     ) || [];
   }
@@ -511,7 +374,6 @@ var GdsListbox = class extends LitElement2 {
     super.connectedCallback();
     this.setAttribute("role", "listbox");
     TransitionalStyles.instance.apply(this, "gds-listbox");
-    this.addEventListener("keydown", __privateGet(this, _keyboardNavigationHandler));
     this.addEventListener("gds-select", __privateGet(this, _handleSelect));
   }
   /**
@@ -533,10 +395,9 @@ var GdsListbox = class extends LitElement2 {
 };
 _slotRef = new WeakMap();
 _handleSelect = new WeakMap();
-_keyboardNavigationHandler = new WeakMap();
 GdsListbox.styles = listbox_styles_default;
 __decorateClass([
-  property2({
+  property({
     type: Boolean,
     reflect: true,
     attribute: "aria-multiselectable",
@@ -547,7 +408,7 @@ __decorateClass([
   })
 ], GdsListbox.prototype, "multiple", 2);
 __decorateClass([
-  property2()
+  property()
 ], GdsListbox.prototype, "compareWith", 2);
 __decorateClass([
   watch("multiple")
@@ -556,12 +417,182 @@ GdsListbox = __decorateClass([
   gdsCustomElement("gds-listbox")
 ], GdsListbox);
 
+// libs/core/src/primitives/listbox/option.ts
+import { LitElement as LitElement2, html as html2 } from "lit";
+import { property as property2 } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// libs/core/src/primitives/listbox/option.styles.ts
+import { css as css2 } from "lit";
+var style2 = css2`
+  :host {
+    padding: 0.5 1rem;
+    cursor: pointer;
+  }
+
+  :host(:hover) {
+    background-color: grey;
+  }
+`;
+var option_styles_default = style2;
+
+// libs/core/src/primitives/listbox/option.ts
+import "reflect-metadata";
+
+// libs/core/src/mixins/focusable.ts
+var Focusable = (superClass) => {
+  class HighlightableElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.onblur = (e) => {
+        this.setAttribute("tabindex", "-1");
+        this.dispatchEvent(
+          new FocusEvent("gds-blur", {
+            bubbles: true,
+            composed: true,
+            relatedTarget: e.relatedTarget
+          })
+        );
+      };
+      this.onfocus = (e) => {
+        this.dispatchEvent(
+          new FocusEvent("gds-focus", {
+            bubbles: true,
+            composed: true,
+            relatedTarget: e.relatedTarget
+          })
+        );
+      };
+    }
+    focus(options) {
+      this.setAttribute("tabindex", "0");
+      super.focus(options);
+      if (document.activeElement !== this) {
+        const iv = setInterval(() => {
+          if (document.activeElement === this)
+            clearInterval(iv);
+          super.focus(options);
+        }, 10);
+      }
+    }
+  }
+  return HighlightableElement;
+};
+
+// libs/core/src/primitives/listbox/option.ts
+var _hidden, _emitSelect, emitSelect_fn;
+var GdsOption = class extends Focusable(LitElement2) {
+  constructor() {
+    super();
+    __privateAdd(this, _emitSelect);
+    __privateAdd(this, _hidden, false);
+    this.selected = false;
+    this.isPlaceholder = false;
+    this.addEventListener("click", __privateMethod(this, _emitSelect, emitSelect_fn));
+    this.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ")
+        return;
+      e.preventDefault();
+      __privateMethod(this, _emitSelect, emitSelect_fn).call(this);
+    });
+  }
+  get hidden() {
+    return __privateGet(this, _hidden);
+  }
+  set hidden(value) {
+    if (this.isPlaceholder)
+      return;
+    __privateSet(this, _hidden, value === "true" || value === true);
+    this.setAttribute("aria-hidden", value.toString());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    if (this.isPlaceholder) {
+      __privateSet(this, _hidden, true);
+      this.setAttribute("aria-hidden", "true");
+    }
+    this.updateComplete.then(
+      () => TransitionalStyles.instance.apply(this, "gds-option")
+    );
+  }
+  get parentElement() {
+    return super.parentElement;
+  }
+  handlePlaceholderStatusChange() {
+    if (this.isPlaceholder) {
+      __privateSet(this, _hidden, true);
+      this.setAttribute("aria-hidden", "true");
+    } else {
+      __privateSet(this, _hidden, false);
+      this.setAttribute("aria-hidden", "false");
+    }
+  }
+  render() {
+    const isMultiple = this.parentElement.multiple;
+    const checkbox = html2`<span
+      class="checkbox ${classMap({ checked: this.selected })}"
+    ></span>`;
+    if (!isMultiple) {
+      if (this.selected)
+        this.setAttribute("highlighted", "");
+      else
+        this.removeAttribute("highlighted");
+    }
+    return html2`${when(isMultiple, () => checkbox)}<slot></slot>`;
+  }
+};
+_hidden = new WeakMap();
+_emitSelect = new WeakSet();
+emitSelect_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("gds-select", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: this.value
+      }
+    })
+  );
+};
+GdsOption.styles = option_styles_default;
+__decorateClass([
+  property2()
+], GdsOption.prototype, "value", 2);
+__decorateClass([
+  property2({
+    attribute: "aria-hidden",
+    reflect: true
+  })
+], GdsOption.prototype, "hidden", 1);
+__decorateClass([
+  property2({
+    attribute: "aria-selected",
+    reflect: true
+  })
+], GdsOption.prototype, "selected", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], GdsOption.prototype, "isPlaceholder", 2);
+__decorateClass([
+  watch("isplaceholder")
+], GdsOption.prototype, "handlePlaceholderStatusChange", 1);
+GdsOption = __decorateClass([
+  gdsCustomElement("gds-option")
+], GdsOption);
+
 // 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 { property as property3, state } from "lit/decorators.js";
 import { msg } from "@lit/localize";
 import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
-import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+import {
+  computePosition,
+  autoUpdate,
+  offset,
+  flip
+} from "@floating-ui/dom";
 
 // libs/core/src/primitives/popover/topLayerOverTransforms.middleware.ts
 var topLayerOverTransforms = () => ({
@@ -740,14 +771,16 @@ var GdsPopover = class extends LitElement3 {
     __privateAdd(this, _unregisterTriggerEvents);
     __privateAdd(this, _registerAutoPositioning);
     this.open = false;
-    this.trigger = void 0;
+    this.triggerRef = Promise.resolve(void 0);
     this.label = void 0;
+    this.placement = "bottom-start";
+    this._trigger = void 0;
     __privateAdd(this, _dialogElementRef, createRef2());
     __privateAdd(this, _handleCloseButton, (e) => {
       e.stopPropagation();
       e.preventDefault();
       this.open = false;
-      setTimeout(() => this.trigger?.focus(), 250);
+      setTimeout(() => this._trigger?.focus(), 250);
     });
     __privateAdd(this, _autoPositionCleanup, void 0);
     /**
@@ -782,8 +815,15 @@ var GdsPopover = class extends LitElement3 {
       }
     });
   }
+  _handleTriggerRefChanged() {
+    this.triggerRef.then((el) => {
+      if (el)
+        this._trigger = el;
+    });
+  }
   _handleTriggerChanged() {
     __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
+    __privateMethod(this, _registerAutoPositioning, registerAutoPositioning_fn).call(this);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -867,24 +907,24 @@ _dialogElementRef = new WeakMap();
 _handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
-  this.trigger?.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
+  this._trigger?.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
 };
 _unregisterTriggerEvents = new WeakSet();
 unregisterTriggerEvents_fn = function() {
   var _a;
-  this.trigger?.removeEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
+  this._trigger?.removeEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
   (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
 };
 _autoPositionCleanup = new WeakMap();
 _registerAutoPositioning = new WeakSet();
 registerAutoPositioning_fn = function() {
-  const referenceEl = this.trigger;
+  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",
+      placement: this.placement,
       middleware: [offset(8), flip(), topLayerOverTransforms()],
       strategy: "fixed"
     }).then(
@@ -905,12 +945,21 @@ __decorateClass([
 ], GdsPopover.prototype, "open", 2);
 __decorateClass([
   property3()
-], GdsPopover.prototype, "trigger", 2);
+], GdsPopover.prototype, "triggerRef", 2);
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "label", 2);
 __decorateClass([
-  watch("trigger")
+  property3()
+], GdsPopover.prototype, "placement", 2);
+__decorateClass([
+  state()
+], GdsPopover.prototype, "_trigger", 2);
+__decorateClass([
+  watch("triggerRef")
+], GdsPopover.prototype, "_handleTriggerRefChanged", 1);
+__decorateClass([
+  watch("_trigger")
 ], GdsPopover.prototype, "_handleTriggerChanged", 1);
 __decorateClass([
   watch("open")
@@ -1034,16 +1083,10 @@ var style4 = css4`
 var dropdown_styles_default = style4;
 
 // libs/core/src/components/dropdown/dropdown.ts
-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 _optionElements, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 var GdsDropdown = class extends GdsFormControlElement {
   constructor() {
     super();
-    /**
-     * Registers the trigger button of the dropdown to the popover.
-     *
-     * @param el The popover element.
-     */
-    __privateAdd(this, _registerPopoverTrigger);
     /**
      * Selects an option in the dropdown.
      *
@@ -1059,19 +1102,14 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.compareWith = (a, b) => a === b;
     this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
     // Private members
-    __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());
     /**
      * Event handler for filtering the options in the dropdown.
      *
      * @param e The keyboard event.
      */
     __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
-      const input = __privateGet(this, _searchInputRef).value;
+      const input = this.elSearchInput;
       const options = Array.from(__privateGet(this, _optionElements));
       options.forEach((o) => o.hidden = false);
       if (!input.value)
@@ -1088,7 +1126,7 @@ var GdsDropdown = class extends GdsFormControlElement {
     __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
       if (e.key === "ArrowDown" || e.key === "Tab") {
         e.preventDefault();
-        __privateGet(this, _listboxRef).value?.focus();
+        this.elListbox?.focus();
         return;
       }
     });
@@ -1099,12 +1137,12 @@ var GdsDropdown = class extends GdsFormControlElement {
     __privateAdd(this, _handleListboxKeyDown, (e) => {
       if (e.key === "Tab" && this.searchable) {
         e.preventDefault();
-        __privateGet(this, _searchInputRef).value?.focus();
+        this.elSearchInput?.focus();
         return;
       }
     });
     __privateAdd(this, _handleOptionFocusChange, (e) => {
-      const triggerButton = __privateGet(this, _triggerRef).value;
+      const triggerButton = this.elTriggerBtn;
       if (triggerButton)
         triggerButton.ariaActiveDescendantElement = e.target;
     });
@@ -1120,7 +1158,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       if (e.key === "Tab" && !this.searchable) {
         e.preventDefault();
         this.open = false;
-        __privateGet(this, _triggerRef).value?.focus();
+        this.elTriggerBtn?.focus();
       }
     });
     constrainSlots(this);
@@ -1174,20 +1212,19 @@ var GdsDropdown = class extends GdsFormControlElement {
     return html`
       ${when2(
       this.label,
-      () => html`<label for="${__privateGet(this, _triggerId)}">${this.label}</label>`
+      () => html`<label for="trigger">${this.label}</label>`
     )}
 
       <span class="form-info"><slot name="sub-label"></slot></span>
 
       <button
-        id="${__privateGet(this, _triggerId)}"
+        id="trigger"
         @click="${() => this.open = !this.open}"
         aria-haspopup="listbox"
         role="combobox"
-        aria-owns="${__privateGet(this, _listboxId)}"
-        aria-controls="${__privateGet(this, _listboxId)}"
+        aria-owns="listbox"
+        aria-controls="listbox"
         aria-expanded="${this.open}"
-        ${ref3(__privateGet(this, _triggerRef))}
       >
         <slot name="trigger">
           <span>${unsafeHTML(this.displayValue)}</span>
@@ -1199,26 +1236,25 @@ var GdsDropdown = class extends GdsFormControlElement {
       <gds-popover
         .label=${this.label}
         .open=${this.open}
+        .triggerRef=${this.elTriggerBtnAsync}
         @gds-ui-state=${(e) => this.open = e.detail.open}
-        ${ref3(__privateMethod(this, _registerPopoverTrigger, registerPopoverTrigger_fn))}
       >
         ${when2(
       this.searchable,
       () => html`<input
+            id="searchinput"
             type="text"
             aria-label="${msg2("Filter available options")}"
             placeholder="${msg2("Search")}"
-            ${ref3(__privateGet(this, _searchInputRef))}
             @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
             @keyup=${__privateGet(this, _handleSearchFieldKeyUp)}
           />`
     )}
 
         <gds-listbox
-          id="${__privateGet(this, _listboxId)}"
+          id="listbox"
           .multiple="${ifDefined(this.multiple)}"
           .compareWith="${this.compareWith}"
-          ${ref3(__privateGet(this, _listboxRef))}
           @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
@@ -1244,7 +1280,7 @@ var GdsDropdown = class extends GdsFormControlElement {
     }
   }
   _handleValueChange() {
-    const listbox = __privateGet(this, _listboxRef).value;
+    const listbox = this.elListbox;
     if (listbox) {
       if (Array.isArray(this.value))
         listbox.selection = this.value;
@@ -1259,7 +1295,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
     else {
       __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
-      __privateGet(this, _searchInputRef).value && (__privateGet(this, _searchInputRef).value.value = "");
+      this.elSearchInput && (this.elSearchInput.value = "");
     }
     this.dispatchEvent(
       new CustomEvent("gds-ui-state", {
@@ -1270,26 +1306,14 @@ var GdsDropdown = class extends GdsFormControlElement {
     );
   }
 };
-_listboxRef = new WeakMap();
-_triggerRef = new WeakMap();
-_searchInputRef = new WeakMap();
 _optionElements = new WeakMap();
-_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) {
-  if (el) {
-    const popover = el;
-    popover.trigger = __privateGet(this, _triggerRef).value;
-  }
-};
 _handleSelectionChange = new WeakSet();
 handleSelectionChange_fn = function() {
-  const listbox = __privateGet(this, _listboxRef).value;
+  const listbox = this.elListbox;
   if (!listbox)
     return;
   if (this.multiple)
@@ -1297,7 +1321,7 @@ handleSelectionChange_fn = function() {
   else {
     this.value = listbox.selection[0]?.value;
     this.open = false;
-    setTimeout(() => __privateGet(this, _triggerRef).value?.focus(), 0);
+    setTimeout(() => this.elTriggerBtn?.focus(), 0);
   }
   this.dispatchEvent(
     new CustomEvent("change", {
@@ -1344,6 +1368,18 @@ __decorateClass([
 __decorateClass([
   property5()
 ], GdsDropdown.prototype, "searchFilter", 2);
+__decorateClass([
+  query("#trigger")
+], GdsDropdown.prototype, "elTriggerBtn", 2);
+__decorateClass([
+  queryAsync("#trigger")
+], GdsDropdown.prototype, "elTriggerBtnAsync", 2);
+__decorateClass([
+  query("#listbox")
+], GdsDropdown.prototype, "elListbox", 2);
+__decorateClass([
+  query("#searchinput")
+], GdsDropdown.prototype, "elSearchInput", 2);
 __decorateClass([
   observeLightDOM()
 ], GdsDropdown.prototype, "_handleLightDOMChange", 1);
@@ -1356,8 +1392,170 @@ __decorateClass([
 GdsDropdown = __decorateClass([
   gdsCustomElement("gds-dropdown")
 ], GdsDropdown);
+
+// libs/core/src/components/context-menu/context-menu.ts
+import { LitElement as LitElement6 } from "lit-element";
+import { msg as msg3 } from "@lit/localize";
+import { classMap as classMap2 } from "lit-html/directives/class-map.js";
+import { property as property6, queryAsync as queryAsync2 } from "lit/decorators.js";
+
+// libs/core/src/primitives/menu/menu.ts
+import { LitElement as LitElement5 } from "lit";
+import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
+var _slotRef2;
+var GdsMenu = class extends LitElement5 {
+  constructor() {
+    super();
+    __privateAdd(this, _slotRef2, createRef3());
+    new ListboxKbNavController(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+    TransitionalStyles.instance.apply(this, "gds-listbox");
+  }
+  get navigableItems() {
+    if (!__privateGet(this, _slotRef2).value)
+      return [];
+    return unwrap(__privateGet(this, _slotRef2).value).assignedElements().filter(
+      (o) => !o.hasAttribute("isplaceholder")
+    ) || [];
+  }
+  /**
+   * Focuses the first item in the menu.
+   */
+  focus() {
+    this.navigableItems[0]?.focus();
+  }
+  render() {
+    return html`<slot ${ref3(__privateGet(this, _slotRef2))}></slot>`;
+  }
+};
+_slotRef2 = new WeakMap();
+GdsMenu = __decorateClass([
+  gdsCustomElement("gds-menu")
+], GdsMenu);
+
+// libs/core/src/components/context-menu/context-menu.ts
+var _handleItemClick, handleItemClick_fn;
+var GdsContextMenu = class extends LitElement6 {
+  constructor() {
+    super();
+    __privateAdd(this, _handleItemClick);
+    this.open = false;
+    this.buttonLabel = msg3("Open context menu");
+    this.label = "";
+    this.placement = "bottom-start";
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-context-menu");
+    this.addEventListener("keydown", (e) => {
+      if (this.open && e.key == "Tab") {
+        e.preventDefault();
+        this.open = false;
+        this.elTriggerBtn.then((el) => el.focus());
+      }
+    });
+  }
+  render() {
+    return html`<button
+        id="trigger"
+        class="ghost border-0 small ${classMap2({ highlighted: this.open })}"
+        aria-label="${this.buttonLabel}"
+        aria-haspopup="menu"
+        aria-controls="menu"
+        aria-expanded=${this.open}
+        @click=${() => this.open = !this.open}
+      >
+        <slot name="trigger">
+          <i class="sg-icon sg-icon-ellipsis"></i>
+        </slot>
+      </button>
+      <gds-popover
+        id="menu"
+        .open=${this.open}
+        .triggerRef=${this.elTriggerBtn}
+        .label=${this.label}
+        .placement=${this.placement}
+        @gds-ui-state=${(e) => this.open = e.detail.open}
+      >
+        <gds-menu
+          aria-label=${this.label}
+          @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
+        >
+          <slot allow="gds-menu-item"></slot>
+        </gds-menu>
+      </gds-popover>`;
+  }
+};
+_handleItemClick = new WeakSet();
+handleItemClick_fn = function() {
+  this.open = false;
+};
+GdsContextMenu.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property6({ type: Boolean, reflect: true })
+], GdsContextMenu.prototype, "open", 2);
+__decorateClass([
+  property6()
+], GdsContextMenu.prototype, "buttonLabel", 2);
+__decorateClass([
+  property6()
+], GdsContextMenu.prototype, "label", 2);
+__decorateClass([
+  property6()
+], GdsContextMenu.prototype, "placement", 2);
+__decorateClass([
+  queryAsync2("#trigger")
+], GdsContextMenu.prototype, "elTriggerBtn", 2);
+GdsContextMenu = __decorateClass([
+  gdsCustomElement("gds-context-menu")
+], GdsContextMenu);
+
+// libs/core/src/primitives/menu/menu-item.ts
+import { LitElement as LitElement7 } from "lit";
+var _handleOnClick;
+var GdsMenuItem = class extends Focusable(LitElement7) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleOnClick, () => {
+      this.dispatchEvent(
+        new CustomEvent("gds-menu-item-click", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menuitem");
+    this.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ")
+        return;
+      e.preventDefault();
+      this.click();
+    });
+    this.addEventListener("click", __privateGet(this, _handleOnClick));
+    TransitionalStyles.instance.apply(this, "gds-option");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_handleOnClick = new WeakMap();
+GdsMenuItem = __decorateClass([
+  gdsCustomElement("gds-menu-item")
+], GdsMenuItem);
 export {
+  GdsContextMenu,
   GdsDropdown,
+  GdsMenuItem,
   GdsOption,
   VER_SUFFIX,
   gdsCustomElement,