/**
 * `<menu-ui>` — Dropdown action menu with roving focus and keyboard navigation. Uses Popover API.
 *
 * @see https://ui-kit.exe.xyz/site/components/menu
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export interface MenuActionEventDetail {
  /** Menu item text. */
  text: string;
  /** Menu item value. */
  value: string;
}

export type MenuActionEvent = CustomEvent<MenuActionEventDetail>;

export class UIMenu extends UIElement {
  /** Gap in px */
  gap: number;
  /** Controls visibility via popover API */
  open: boolean;
  /** Preferred position relative to the anchor element */
  placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIMenu, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'action', listener: (ev: MenuActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}

export class UIMenuDivider extends UIElement {
}

export class UIMenuItem extends UIElement {
  /** Disabled state — blocks pointer + keyboard activation. */
  disabled: boolean;
  /** Optional leading Phosphor icon name. */
  icon: string;
  /** Item label text. */
  text: string;
  /** Stable identifier emitted via the parent menu's `select` event. */
  value: string;
  /** Semantic variant. */
  variant: 'default' | 'danger';
}
