/**
 * `<tabs-ui>` — Tabbed panel switcher. Renders a button strip from child <tab-ui> elements and toggles their associated panel via the active attribute. Use for switching between equivalent peer views in one region; for navigation between routes use <nav-ui> instead.
 *
 * @see https://ui-kit.exe.xyz/site/components/tabs
 *
 * 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 TabsChangeEventDetail {
  /** New active tab value. */
  value: string;
}

export type TabsChangeEvent = CustomEvent<TabsChangeEventDetail>;

export class UITabs extends UIElement {
  /** Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal. */
  orientation: string;
  /** Value of the currently active tab. Set programmatically or auto-assigned to the first non-disabled tab on connect. */
  value: string;
  /** Visual variant — `default` (underline strip) or `bordered`. */
  variant: 'default' | 'bordered';

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

export class UITab extends UIElement {
  /** Whether the tab is selectable. */
  disabled: boolean;
  /** Optional leading icon name (Phosphor) for the tab button. */
  icon: string;
  /** Tab button label (rendered by parent <tabs-ui>). */
  text: string;
  /** Stable id for the tab. Parent uses this to coordinate active state. */
  value: string;
}
