/**
 * `<calendar-picker-ui>` — Date picker with popover-anchored calendar grid.
 *
 * @see https://ui-kit.exe.xyz/site/components/calendar-picker
 */

import { UIFormElement } from '../../core/form.js';

export interface CalendarPickerChangeEventDetail {
  /** Selected date in ISO-8601 form (e.g. `"2026-05-12"`). */
  value: string;
}
export type CalendarPickerChangeEvent = CustomEvent<CalendarPickerChangeEventDetail>;

export class UICalendarPicker extends UIFormElement {
  /** ISO-date string of the selected day. */
  value: string;
  /** Open/closed reflected state. */
  open: boolean;
  /** §207 (v0.5.7): label rendered above the trigger. */
  label: string;
  /** §207 (v0.5.7): placeholder text when no date is selected. */
  placeholder: string;
  /** §207 (v0.5.7): display format for the trigger label (e.g. `"YYYY-MM-DD"`). */
  format: string;
  /** §207 (v0.5.7): earliest selectable ISO-date; `null` to disable. */
  min: string | null;
  /** §207 (v0.5.7): latest selectable ISO-date; `null` to disable. */
  max: string | null;

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