/**
 * `<switch-ui>` — Toggle switch (boolean-semantic form control).
 *
 * @see https://ui-kit.exe.xyz/site/components/switch
 */

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

export interface SwitchChangeEventDetail<V extends string = string> {
  /** Submitted value (defaults to `"on"` when checked). */
  value: V;
  /** Current checked state. */
  checked: boolean;
}
export type SwitchChangeEvent<V extends string = string> = CustomEvent<SwitchChangeEventDetail<V>>;

export class UISwitch extends UIFormElement {
  /** Checked state — reflected, toggles on click. */
  checked: boolean;
  label: string;
  /** Size — `sm` / `md` / `lg`. */
  size: '' | 'sm' | 'md' | 'lg';
  /** §207 (v0.5.7): hint text rendered below the switch, wired to aria-describedby. */
  hint: string;

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