@sebgroup/green-core 1.0.0-beta.4

package/index.js

@@ -0,0 +1,1065 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg2) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg2);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+
+// libs/core/src/components/dropdown/dropdown.ts
+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 { msg, str, updateWhenLocaleChanges } from "@lit/localize";
+import "reflect-metadata";
+
+// libs/core/src/utils/helpers/constrain-slots.ts
+function constrainSlots(self) {
+  self.updateComplete.then(() => {
+    const slots = self.shadowRoot?.querySelectorAll("slot[gds-allow]");
+    if (!slots)
+      return;
+    for (const node of Array.from(self.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === "") {
+        node.parentNode?.removeChild(node);
+      }
+    }
+    const constrain = (slot) => {
+      const allowed = slot.getAttribute("gds-allow")?.split(" ") || [];
+      for (const node of Array.from(slot.assignedNodes())) {
+        if (!allowed.includes(node.nodeName.toLowerCase())) {
+          node.parentNode?.removeChild(node);
+        }
+      }
+    };
+    slots.forEach((slot) => {
+      constrain(slot);
+      slot.addEventListener("slotchange", () => constrain(slot));
+    });
+  });
+}
+
+// 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 = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, propertyKey, descriptor) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property6) => {
+        const key = property6;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              descriptor.value?.call(this, oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
+// libs/core/src/utils/decorators/observe-light-dom.ts
+function observeLightDOM() {
+  return (proto, _propertyKey, descriptor) => {
+    const observerConfig = { attributes: true, childList: true, subtree: false };
+    let observer;
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      connectedCallback?.call(this);
+      const callback = (_mutationList, _observer) => {
+        descriptor.value?.call(this);
+      };
+      observer = new MutationObserver(callback);
+      observer.observe(this, observerConfig);
+    };
+    proto.disconnectedCallback = function() {
+      disconnectedCallback?.call(this);
+      observer.disconnect();
+    };
+  };
+}
+
+// libs/core/src/utils/helpers/custom-element-scoping.ts
+import { html as litHtml } from "lit";
+import { customElement } from "lit/decorators.js";
+var VER_SUFFIX = "-gdsvsuffix";
+var elementLookupTable = /* @__PURE__ */ new Map();
+var gdsCustomElement = (tagName) => {
+  if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+    return customElement(tagName);
+  }
+  const versionedTagName = tagName + VER_SUFFIX;
+  elementLookupTable.set(tagName, versionedTagName);
+  return customElement(versionedTagName);
+};
+var templateCache = /* @__PURE__ */ new WeakMap();
+function applyElementScoping(strings, ...values) {
+  let modstrings = templateCache.get(strings);
+  if (!modstrings) {
+    modstrings = replaceTags(strings);
+    modstrings.raw = replaceTags(strings.raw);
+    templateCache.set(strings, modstrings);
+  }
+  return [modstrings, ...values];
+}
+var replaceTags = (inStr) => inStr.map((s) => {
+  for (const [key, value] of elementLookupTable.entries()) {
+    s = s.split(key).join(value);
+  }
+  return s;
+});
+function htmlTemplateTagFactory(extendedTag) {
+  return (strings, ...values) => {
+    if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+      return extendedTag(strings, ...values);
+    }
+    const [modstrings, ...modvalues] = applyElementScoping(strings, ...values);
+    return extendedTag(modstrings, ...modvalues);
+  };
+}
+var html = htmlTemplateTagFactory(litHtml);
+function getScopedTagName(tagName) {
+  return elementLookupTable.get(tagName) ?? tagName;
+}
+function getUnscopedTagName(tagName) {
+  return [...elementLookupTable.entries()].find(
+    ([, value]) => value === tagName
+  )?.[0];
+}
+
+// libs/core/src/primitives/listbox/listbox.ts
+import { LitElement as LitElement2 } from "lit";
+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 {
+  constructor() {
+    this.sheets = /* @__PURE__ */ new Map();
+    this.elements = /* @__PURE__ */ new Map();
+  }
+  static get instance() {
+    if (!globalThis.__gdsTransitionalStyles)
+      globalThis.__gdsTransitionalStyles = new TransitionalStyles();
+    return globalThis.__gdsTransitionalStyles;
+  }
+  apply(element, styleKey) {
+    const sheet = this.sheets.get(styleKey);
+    if (!sheet || !element.shadowRoot)
+      return;
+    this.elements.set(styleKey, element);
+    this.applyToElement(styleKey, sheet);
+  }
+  applyToElement(styleKey, sheet) {
+    const element = this.elements.get(styleKey);
+    if (!element || !element.shadowRoot)
+      return;
+    element.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+  register(name, styles) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(styles);
+    this.sheets.set(name, sheet);
+    this.applyToElement(name, sheet);
+  }
+};
+
+// 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`
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+var listbox_styles_default = style2;
+
+// libs/core/src/primitives/listbox/listbox.ts
+var _slotRef, _handleSelect, _keyboardNavigationHandler;
+var GdsListbox = class extends LitElement2 {
+  constructor() {
+    super();
+    this.multiple = false;
+    __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))
+        return;
+      let handled = false;
+      if (e.key === "ArrowDown") {
+        const nextOptionIndex = this.visibleOptionElements.indexOf(e.target) + 1;
+        const nextItem = this.visibleOptionElements[nextOptionIndex];
+        nextItem?.focus();
+        handled = true;
+      } else if (e.key === "ArrowUp") {
+        const prevOptionIndex = this.visibleOptionElements.indexOf(e.target) - 1;
+        const prevItem = this.visibleOptionElements[prevOptionIndex];
+        prevItem?.focus();
+        handled = true;
+      } else if (e.key === "Home") {
+        this.visibleOptionElements[0]?.focus();
+        handled = true;
+      } else if (e.key === "End") {
+        this.visibleOptionElements[this.visibleOptionElements.length - 1]?.focus();
+        handled = true;
+      } else {
+        const key = e.key.toLowerCase();
+        if (key.length !== 1) {
+          return;
+        }
+        const isLetter = key >= "a" && key <= "z";
+        const isNumber = key >= "0" && key <= "9";
+        if (isLetter || isNumber) {
+          const firstMatch = this.visibleOptionElements.find((el) => {
+            const text = el.textContent?.trim().toLowerCase();
+            return text?.startsWith(key);
+          });
+          firstMatch?.focus();
+          handled = true;
+        }
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+  }
+  /**
+   * Returns a list of all `gds-option` elements in the listbox.
+   */
+  get options() {
+    let slot = __privateGet(this, _slotRef).value;
+    if (!slot)
+      return [];
+    while (slot.assignedElements().length > 0 && slot.assignedElements()[0].nodeName === "SLOT") {
+      slot = slot.assignedElements()[0];
+    }
+    return slot.assignedElements().filter(
+      (o) => !o.hasAttribute("isplaceholder")
+    ) || [];
+  }
+  /**
+   * Returns a list of all visible `gds-option` elements in the listbox.
+   */
+  get visibleOptionElements() {
+    return this.options.filter((el) => !el.hidden);
+  }
+  /**
+   * Returns a list of all visible `gds-option` elements in the listbox.
+   */
+  get visibleSelectedOptionElements() {
+    return this.options.filter((el) => el.selected && !el.hidden);
+  }
+  /**
+   * Returns a list of all selected `gds-option` elements in the listbox.
+   */
+  get selection() {
+    return this.options.filter((el) => el.selected);
+  }
+  set selection(values) {
+    this.options.forEach((el) => {
+      el.selected = values.includes(el.value) || values.includes(el);
+    });
+  }
+  connectedCallback() {
+    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));
+  }
+  /**
+   * Focuses the first selected option in the listbox.
+   * If no option is selected, the first visible option is focused.
+   */
+  focus() {
+    ;
+    (this.visibleSelectedOptionElements[0] || this.visibleOptionElements[0])?.focus();
+  }
+  render() {
+    return html`<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
+  }
+  _rerenderOptions() {
+    this.options.forEach((el) => {
+      el.requestUpdate();
+    });
+  }
+};
+_slotRef = new WeakMap();
+_handleSelect = new WeakMap();
+_keyboardNavigationHandler = new WeakMap();
+GdsListbox.styles = listbox_styles_default;
+__decorateClass([
+  property2({
+    type: Boolean,
+    reflect: true,
+    attribute: "aria-multiselectable",
+    converter: {
+      fromAttribute: Boolean,
+      toAttribute: (value) => value.toString()
+    }
+  })
+], GdsListbox.prototype, "multiple", 2);
+__decorateClass([
+  watch("multiple")
+], GdsListbox.prototype, "_rerenderOptions", 1);
+GdsListbox = __decorateClass([
+  gdsCustomElement("gds-listbox")
+], GdsListbox);
+
+// 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 { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+
+// libs/core/src/primitives/popover/popover.styles.ts
+import { css as css3 } from "lit";
+var style3 = css3`
+  :host {
+    position: absolute;
+    background-color: white;
+    box-shadow: 0 1rem 1rem 1rem rgba(0, 0, 0, 0.1);
+  }
+`;
+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 GdsPopover = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _registerTriggerEvents);
+    __privateAdd(this, _unregisterTriggerEvents);
+    __privateAdd(this, _setOpen);
+    this.open = false;
+    this.trigger = void 0;
+    __privateAdd(this, _autoPositionCleanup, void 0);
+    /**
+     * ArrowDown on the trigger element will trigger the popover by default, and escape will close it.
+     */
+    __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();
+        });
+      }
+      if (e.key === "Escape") {
+        __privateMethod(this, _setOpen, setOpen_fn).call(this, false);
+      }
+    });
+  }
+  _handleTriggerChanged() {
+    __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-popover");
+    __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
+    this._updateHidden();
+    this.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        __privateMethod(this, _setOpen, setOpen_fn).call(this, false);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
+  }
+  render() {
+    return html3` <slot></slot> `;
+  }
+  _updateHidden() {
+    this.setAttribute("aria-hidden", String(!this.open));
+    this.hidden = !this.open;
+  }
+};
+_autoPositionCleanup = 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`
+      });
+    });
+  }));
+};
+_unregisterTriggerEvents = new WeakSet();
+unregisterTriggerEvents_fn = function() {
+  var _a;
+  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
+    })
+  );
+};
+GdsPopover.styles = unsafeCSS3(popover_styles_default);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], GdsPopover.prototype, "open", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "trigger", 2);
+__decorateClass([
+  watch("trigger")
+], GdsPopover.prototype, "_handleTriggerChanged", 1);
+__decorateClass([
+  watch("open")
+], GdsPopover.prototype, "_updateHidden", 1);
+GdsPopover = __decorateClass([
+  gdsCustomElement("gds-popover")
+], GdsPopover);
+
+// 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.value = void 0;
+    });
+    __privateSet(this, _internals, this.attachInternals());
+  }
+  get form() {
+    return __privateGet(this, _internals).form;
+  }
+  get type() {
+    return getUnscopedTagName(this.localName) || "gds-form-control";
+  }
+  get validity() {
+    return __privateGet(this, _internals).validity;
+  }
+  get validationMessage() {
+    return __privateGet(this, _internals).validationMessage;
+  }
+  get willValidate() {
+    return __privateGet(this, _internals).willValidate;
+  }
+  checkValidity() {
+    return __privateGet(this, _internals).checkValidity();
+  }
+  reportValidity() {
+    return __privateGet(this, _internals).reportValidity();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateGet(this, _internals).form?.addEventListener("reset", __privateGet(this, _handleFormReset));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _internals).form?.removeEventListener("reset", __privateGet(this, _handleFormReset));
+  }
+  __handleValidityChange() {
+    __privateGet(this, _internals).setValidity(
+      {
+        badInput: false,
+        customError: this.invalid,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: false
+      },
+      this.validationMessage || "Error message"
+    );
+  }
+  __handleValueChange() {
+    __privateGet(this, _internals).setFormValue(this.value);
+  }
+};
+_internals = new WeakMap();
+_handleFormReset = new WeakMap();
+GdsFormControlElement.formAssociated = true;
+__decorateClass([
+  property4({
+    type: Boolean,
+    reflect: true,
+    attribute: "aria-invalid",
+    converter: {
+      fromAttribute: Boolean,
+      toAttribute: (value) => value?.toString()
+    }
+  })
+], GdsFormControlElement.prototype, "invalid", 2);
+__decorateClass([
+  property4()
+], GdsFormControlElement.prototype, "value", 2);
+__decorateClass([
+  property4({ reflect: true })
+], GdsFormControlElement.prototype, "name", 2);
+__decorateClass([
+  watch("invalid")
+], GdsFormControlElement.prototype, "__handleValidityChange", 1);
+__decorateClass([
+  watch("value")
+], GdsFormControlElement.prototype, "__handleValueChange", 1);
+
+// libs/core/src/components/dropdown/dropdown.styles.ts
+import { css as css4 } from "lit";
+var style4 = css4`
+  button {
+    appearance: none;
+    display: block;
+    background-color: black;
+    border-radius: 2rem;
+    border: none;
+    color: white;
+    padding: 0.7rem 2rem;
+    margin: 0.5rem 0;
+  }
+`;
+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 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.
+     *
+     * @fires change
+     */
+    __privateAdd(this, _handleSelectionChange);
+    __privateAdd(this, _registerAutoCloseListener);
+    __privateAdd(this, _unregisterAutoCloseListener);
+    this.label = "";
+    this.open = false;
+    this.searchable = false;
+    this.multiple = false;
+    // Private members
+    __privateAdd(this, _listboxRef, createRef2());
+    __privateAdd(this, _triggerRef, createRef2());
+    __privateAdd(this, _searchInputRef, createRef2());
+    __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 = e.target;
+      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())
+      );
+      filteredOptions.forEach((o) => o.hidden = true);
+    });
+    /**
+     * Check for ArrowDown in the search field.
+     * If found, focus should be moved to the listbox.
+     */
+    __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
+      if (e.key === "ArrowDown") {
+        __privateGet(this, _listboxRef).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.
+     */
+    __privateAdd(this, _autoCloseListener, (e) => {
+      const isClickOutside = e instanceof MouseEvent && e.target instanceof Node && !this.contains(e.target);
+      const isFocusOutside = e instanceof FocusEvent && e.relatedTarget && !this.contains(e.relatedTarget);
+      if (isClickOutside || isFocusOutside)
+        this.open = false;
+    });
+    constrainSlots(this);
+    updateWhenLocaleChanges(this);
+    __privateSet(this, _optionElements, this.getElementsByTagName(
+      getScopedTagName("gds-option")
+    ));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-dropdown");
+    this.updateComplete.then(() => {
+      this._handleLightDOMChange();
+      this._handleValueChange();
+    });
+  }
+  /**
+   * Get the options of the dropdown.
+   */
+  get options() {
+    return Array.from(__privateGet(this, _optionElements)).filter(
+      (o) => !o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Return the first option with a isPlaceholder attribute.
+   * If no placeholder is found, this will be undefined.
+   */
+  get placeholder() {
+    return Array.from(__privateGet(this, _optionElements)).find(
+      (o) => o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Returns the display value as a string.
+   * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
+   */
+  get displayValue() {
+    let displayValue;
+    if (Array.isArray(this.value)) {
+      this.value.length > 2 ? displayValue = msg(str`${this.value.length} selected`) : displayValue = this.value.reduce(
+        (acc, cur) => acc + this.options.find((v) => v.value === cur)?.innerHTML + ", ",
+        ""
+      ).slice(0, -2);
+    } else {
+      displayValue = this.options.find((v) => v.selected)?.innerHTML;
+    }
+    return displayValue || this.placeholder?.innerHTML || "";
+  }
+  render() {
+    return html`
+      ${when2(
+      this.label,
+      () => html`<label for="${__privateGet(this, _triggerId)}">${this.label}</label>`
+    )}
+
+      <span class="form-info"><slot name="sub-label"></slot></span>
+
+      <button
+        id="${__privateGet(this, _triggerId)}"
+        @click="${() => this.open = !this.open}"
+        aria-haspopup="listbox"
+        role="combobox"
+        aria-owns="${__privateGet(this, _listboxId)}"
+        aria-controls="${__privateGet(this, _listboxId)}"
+        aria-expanded="${this.open}"
+        ${ref2(__privateGet(this, _triggerRef))}
+      >
+        <slot name="trigger">
+          <span>${unsafeHTML(this.displayValue)}</span>
+        </slot>
+      </button>
+
+      <span class="form-info"><slot name="message"></slot></span>
+
+      <gds-popover
+        .open=${this.open}
+        @gds-ui-state=${(e) => this.open = e.detail.open}
+        ${ref2(__privateMethod(this, _registerPopoverTrigger, registerPopoverTrigger_fn))}
+      >
+        ${when2(
+      this.searchable,
+      () => html`<input
+            type="text"
+            aria-label="${msg("Filter available options")}"
+            placeholder="${msg("Search")}"
+            ${ref2(__privateGet(this, _searchInputRef))}
+            @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
+            @keyup=${__privateGet(this, _handleSearchFieldKeyUp)}
+          />`
+    )}
+
+        <gds-listbox
+          id="${__privateGet(this, _listboxId)}"
+          .multiple="${ifDefined(this.multiple)}"
+          ${ref2(__privateGet(this, _listboxRef))}
+          @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
+          @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
+        >
+          <slot gds-allow="gds-option"></slot>
+        </gds-listbox>
+      </gds-popover>
+    `;
+  }
+  _handleLightDOMChange() {
+    this.requestUpdate();
+    if (this.multiple)
+      return;
+    if (!this.value) {
+      if (this.placeholder)
+        this.value = this.placeholder.value;
+      else
+        this.value = this.options[0]?.value;
+    } else if (!this.placeholder && this.options.find((o) => o.value === this.value) === void 0) {
+      this.options[0] && (this.options[0].selected = true);
+      this.value = this.options[0]?.value;
+    }
+  }
+  _handleValueChange() {
+    const listbox = __privateGet(this, _listboxRef).value;
+    if (listbox) {
+      if (Array.isArray(this.value))
+        listbox.selection = this.value;
+      else
+        listbox.selection = [this.value];
+    }
+  }
+  _onOpenChange() {
+    const open = this.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", {
+        detail: { open },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+_listboxRef = new WeakMap();
+_triggerRef = new WeakMap();
+_searchInputRef = new WeakMap();
+_optionElements = new WeakMap();
+_listboxId = new WeakMap();
+_triggerId = new WeakMap();
+_handleSearchFieldKeyUp = new WeakMap();
+_handleSearchFieldKeyDown = 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;
+  if (!listbox)
+    return;
+  if (this.multiple)
+    this.value = listbox.selection.map((s) => s.value);
+  else {
+    this.value = listbox.selection[0]?.value;
+    this.open = false;
+    setTimeout(() => __privateGet(this, _triggerRef).value?.focus(), 0);
+  }
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+_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));
+};
+_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));
+};
+_autoCloseListener = new WeakMap();
+GdsDropdown.styles = dropdown_styles_default;
+GdsDropdown.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property5()
+], GdsDropdown.prototype, "label", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "open", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "searchable", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "multiple", 2);
+__decorateClass([
+  observeLightDOM()
+], GdsDropdown.prototype, "_handleLightDOMChange", 1);
+__decorateClass([
+  watch("value")
+], GdsDropdown.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDropdown.prototype, "_onOpenChange", 1);
+GdsDropdown = __decorateClass([
+  gdsCustomElement("gds-dropdown")
+], GdsDropdown);
+export {
+  GdsDropdown,
+  GdsOption,
+  gdsCustomElement,
+  getScopedTagName,
+  getUnscopedTagName,
+  html,
+  htmlTemplateTagFactory
+};