/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { FlipContext } from "../interfaces.js";
import type { TabPosition } from "../calcite-tabs/interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";

/**
 * Tab-titles are optionally individually closable.
 *
 * @cssproperty [--calcite-tab-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-tab-text-color-press] - Specifies the component's text color when hovered, pressed, or selected.
 * @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-tab-background-color-hover] - When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
 * @cssproperty [--calcite-tab-accent-color-press] - When `selected` or active, specifies the component's accent color.
 * @cssproperty [--calcite-tab-icon-color-start] - Specifies the component's `iconStart` color.
 * @cssproperty [--calcite-tab-icon-color-start-press] - When `selected`, hovered, or pressed, specifies the component's `iconStart` color.
 * @cssproperty [--calcite-tab-icon-color-end] - Specifies the component's `iconEnd` color.
 * @cssproperty [--calcite-tab-icon-color-end-press] - When `selected`, hovered, or pressed, specifies the component's `iconEnd` color.
 * @cssproperty [--calcite-tab-close-icon-color] - Specifies the component's close element icon color.
 * @cssproperty [--calcite-tab-close-icon-color-press] - Specifies the component's close element icon color when hovered, focused, and active.
 * @cssproperty [--calcite-tab-close-icon-background-color] - Specifies the component's close element icon background color.
 * @cssproperty [--calcite-tab-close-icon-background-color-press] - Specifies the component's close element icon background color when pressed.
 * @cssproperty [--calcite-tab-close-icon-background-color-hover] - Specifies the component's close element icon background color when hovered.
 * @slot  - A slot for adding text.
 */
export abstract class TabTitle extends LitElement {
  /**
   * When `true`, displays a close button in the component.
   *
   * @default false
   */
  accessor closable: boolean;
  /**
   * When `true`, hides the component.
   *
   * @default false
   */
  accessor closed: boolean;
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /** Specifies an icon to display at the end of the component. */
  accessor iconEnd: IconName | undefined;
  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
  accessor iconFlipRtl: FlipContext | undefined;
  /** Specifies an icon to display at the start of the component. */
  accessor iconStart: IconName | undefined;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: { close?: string; };
  /**
   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
   *
   *  \@internal
   *
   * @default "top"
   */
  accessor position: TabPosition;
  /**
   * When `true`, the component and its respective `calcite-tab` contents are selected.
   *
   * Only one tab can be selected within the `calcite-tabs` parent.
   *
   * @default false
   */
  accessor selected: boolean;
  /**
   * Specifies a unique name for the component.
   *
   * When specified, use the same value on the `calcite-tab`.
   */
  accessor tab: string;
  /** Returns the index of the title within the `calcite-tab-nav`. */
  getTabIndex(): Promise<number>;
  /** Fires when a `calcite-tab` is selected. */
  readonly calciteTabsActivate: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when a `calcite-tab` is closed. */
  readonly calciteTabsClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteTabsActivate: TabTitle["calciteTabsActivate"]["detail"];
    calciteTabsClose: TabTitle["calciteTabsClose"]["detail"];
  };
}