/**
 * `<demo-toggle-ui>` — Side-by-side comparison primitive — header bar with a switch + two child slots ("on" / "off"); toggling the switch swaps which slot is visible. Used on trait detail pages to show "with trait" vs "without trait" on the same chrome. data-mode="overlay" stacks the slots on the same coordinates so layout never shifts.
 *
 * @see https://ui-kit.exe.xyz/site/components/demo-toggle
 *
 * 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 DemoToggleChangeEventDetail {
  /** New toggle state. */
  state: boolean;
}

export type DemoToggleChangeEvent = CustomEvent<DemoToggleChangeEventDetail>;

export class UIDemoToggle extends UIElement {
  /** Initial state when [state] is not set on connect ("on" | "off"). */
  initial: 'on' | 'off';
  /** Header label rendered when state is "off". */
  labelOff: string;
  /** Header label rendered when state is "on". */
  labelOn: string;
  /** Current toggle state ("on" | "off"). Reflected as data-state on the host. */
  state: '' | 'on' | 'off';

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