import type { CSSResultOrNative } from 'lit'
import { customElement } from 'lit/decorators.js'
import Element from './internal/Menu.js'
import styles from './internal/Menu.styles.js'

/**
 * Material Design 3 Menu component with sub-menu support.
 *
 * @element ui-menu
 * @attribute {boolean} open - Whether the menu is currently open
 * @attribute {boolean} anchored - Whether the menu should be positioned relative to an anchor element
 * @attribute {boolean} disabled - Whether the menu is disabled
 * @fires select - Dispatched when a menu item is selected
 * @fires close - Dispatched when the menu is closed
 * @fires open - Dispatched when the menu is opened
 */
@customElement('ui-menu')
export class UiMenuElement extends Element {
  static override styles: CSSResultOrNative[] = [styles]
}

declare global {
  interface HTMLElementTagNameMap {
    'ui-menu': UiMenuElement
  }
}
