/**
 * `<segmented-ui>` — Segmented control for 2-5 mutually-exclusive options.
 *
 * @see https://ui-kit.exe.xyz/site/components/segmented
 */

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

export interface SegmentedChangeEventDetail<V extends string = string> {
  value: V;
}
export type SegmentedChangeEvent<V extends string = string> = CustomEvent<SegmentedChangeEventDetail<V>>;

export class UISegmented extends UIFormElement {
  /** Selected segment's value. */
  value: string;

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