/**
 * `<modal-ui>` — Centered dialog overlay using native <dialog> — same portal /
backdrop / focus-trap / Escape-dismiss primitives as <drawer-ui>,
but anchored to the viewport center with size presets. Canonical
inner shape mirrors drawer / card: <header> + one or more <section>
+ optional <footer>. The header stamps a built-in title bar from
[text] plus an auto-close button (unless [permanent]). Use modal-ui
for centered confirmations, destructive prompts, transient previews,
and short focused interactions; use <drawer-ui> instead for
edge-anchored multi-field editors and mobile sheet patterns.

 *
 * @see https://ui-kit.exe.xyz/site/components/modal
 *
 * 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 type ModalCloseEvent = CustomEvent<unknown>;

export class UIModal extends UIElement {
  /** Controls overlay visibility. Setting to true opens the surface with entry animation. */
  open: boolean;
  /** When true, suppress backdrop click and Escape key dismissal of the overlay */
  permanent: boolean;
  /** Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw. */
  size: 'sm' | 'md' | 'lg' | 'xl';
  /** Aria label applied to the surface element for accessibility */
  text: string;

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