/**
 * `<tag-ui>` — Inline INTERACTIVE chip / pill with optional dismiss affordance.
Text rendered via CSS `attr(text)`. Use for filter chips
(removable=true + `remove` event), autocomplete tokens, and
user-managed labels. Distinct from <badge-ui>, which is READ-ONLY
and includes the [status] shorthand for Beta / New / Deprecated
markers — badge-ui has no remove event. For navigation grouping
use <nav-group-ui>; for inline command actions use
<action-list-ui>.

 *
 * @see https://ui-kit.exe.xyz/site/components/tag
 *
 * 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 TagRemoveEventDetail {
  /** Tag text content. */
  text: string;
  /** Tag value (same as text). */
  value: string;
}

export type TagRemoveEvent = CustomEvent<TagRemoveEventDetail>;

export class UITag extends UIElement {
  /** Disables interaction and dims the tag. */
  disabled: boolean;
  /** Shows a dismiss button that fires the remove event. */
  removable: boolean;
  /** Size preset controlling font-size and padding. */
  size: 'sm' | 'md';
  /** Tag text content. */
  text: string;
  /** Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after. */
  textContent: string;
  /** Fill style — orthogonal to [variant]. Three values:
  - `solid` (default for family variants) — saturated bg + on-strong
    (near-white) text. The chip IS the state.
  - `muted` — tinted bg with scheme-paired text. Matches <badge-ui>'s
    default look. Use on metadata chips in dense lists where the
    saturated default would compete for attention.
  - `outline` — transparent bg + family-colored border + family-colored
    text. The lightest visual weight; good in dense data tables or
    faceted filter rows where multiple chips would otherwise compete.
The `default` variant (no family) stays quiet chrome regardless of
tone unless `tone="solid"` is set explicitly (high-contrast neutral
inverse), or `tone="outline"` (fg-muted text + subtle border).
 */
  tone: 'solid' | 'muted' | 'outline';
  /** Semantic variant — `default | info | success | warning | danger`. */
  variant: 'default' | 'info' | 'success' | 'warning' | 'danger';

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