/**
 * `<toggle-group-ui>` — Multi-select button group (unlike <segmented-ui> which is single-select). Hosts <toggle-option-ui> children, each independently toggleable; emits change events with the active value set. Use for filter chips or feature flag clusters; for single-select option groups use <segmented-ui> instead.
 *
 * @see https://ui-kit.exe.xyz/site/components/toggle-group
 *
 * 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 ToggleGroupChangeEventDetail {
  /** New toggle-group value. */
  value: string;
}

export type ToggleGroupChangeEvent = CustomEvent<ToggleGroupChangeEventDetail>;

export class UIToggleGroup extends UIElement {
  /** When true, restrict to one active option (single-select). */
  single: boolean;
  /** Comma-separated selected values */
  value: string;

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

export class UIToggleOption extends UIElement {
  /** Disabled state — blocks pointer + keyboard activation. */
  disabled: boolean;
  /** Optional Phosphor icon name; renders as a leading icon. */
  icon: string;
  /** Visible label text. */
  text: string;
  /** Stable identifier matched against the parent group's `value`. */
  value: string;
}
