import type { CSSResultOrNative } from 'lit'
import { customElement } from 'lit/decorators.js'
import Element from './internal/MenuItem.js'
import styles from './internal/MenuItem.styles.js'
import listStyles from '../list/internals/ListItem.styles.js'

/**
 * Material Design 3 Menu Item component.
 *
 * @element ui-menu-item
 * @attribute {Object} data - The menu item data object
 * @attribute {boolean} disabled - Whether the menu item is disabled
 * @fires select - Dispatched when the menu item is selected
 * @fires submenu-open - Dispatched when a sub-menu is opened
 */
@customElement('ui-menu-item')
export class UiMenuItemElement extends Element {
  static override styles: CSSResultOrNative[] = [styles, listStyles]
}

declare global {
  interface HTMLElementTagNameMap {
    'ui-menu-item': UiMenuItemElement
  }
}
