import {
  __decorateClass,
  __privateAdd,
  __privateGet
} from "../../chunks/chunk.QU3DSPNU.js";
var _handleOnClick;
import { GdsElement } from "../../gds-element.js";
import { gdsCustomElement, html } from "../../scoping.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import { Focusable } from "../../utils/mixins/focusable.js";
import styles from "../listbox/option.styles.js";
let GdsMenuItem = class extends Focusable(GdsElement) {
  constructor() {
    super(...arguments);
    __privateAdd(this, _handleOnClick, () => {
      this.dispatchCustomEvent("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`<div class="item"><slot></slot></div>`;
  }
};
_handleOnClick = new WeakMap();
GdsMenuItem.styles = [styles];
GdsMenuItem = __decorateClass([
  gdsCustomElement("gds-menu-item")
], GdsMenuItem);
export {
  GdsMenuItem
};
