import { Cre8FormElement } from '../cre8-form-element';
import '../icon/icon';
/**
 * The tag component allows you to make selections, filter content, or trigger actions. While buttons are
 * expected to appear consistently and with familiar calls to actions, tags should appear dynamically
 * as a group of multiple interactions elements. It is a flexible
 * component that comes in the following types:
 *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow
 * one option to be chosen and can be used in place of radio button when they need to be listed
 * horizontally
 *
 *  - **checkbox** It allows for selecting options, It can be toggled on and off.
 */
export declare class Cre8Tag extends Cre8FormElement {
    static styles: import("lit").CSSResult[];
    text: string;
    /**
     * Type of tag
     * **checkbox** renders a checkbox tag
     ***radio** renders a radio tag
     */
    type: 'checkbox' | 'radio';
    /**
     * Color variant
     * **neutral** renders the default, unselected tag
     * **branded** renders a selected tag
     * **neutral-hybrid** renders a tag when mouse is hovering tag
     */
    variant: 'neutral' | 'branded' | 'neutral-hybrid';
    /**
     * shape of the tag, supports square and round, and default not mentioned its a square
     */
    shape: 'square' | 'round';
    isDisabled?: boolean;
    isSelected?: boolean;
    /**
    * Get the radio field item input
    */
    field: HTMLInputElement;
    /**
     * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the
     * corresponding label.
     */
    fieldId?: string;
    /**
    * Initial checked for initial checked state
    */
    private initialSelected?;
    connectedCallback(): void;
    disconnectedCallback(): void;
    renderCheckboxIcon(): import("lit-html").TemplateResult<1>;
    private _clickCheckHandler;
    private _handleCheckKeyDown;
    /**
    * Reset the radio tag field
    */
    resetField(): void;
    /**
    * Reset the radio field tags tab indeces
    */
    resetTabIndeces(tags: Cre8Tag[]): void;
    /**
    * Remove checked
    * 1) Remove checked property from all tags and set tabindex to -1
    * 2) Reset the form field to not checked
    */
    private _removeChecked;
    /**
    * Reset form callback
    * 1) Remove the checked state from all radio tags
    * 2) Set the checked state to the initial checked state
    * 3) Set the radio field input checked attribute to the initial checked state
    */
    formResetCallback(): void;
    private _clickRadioHandler;
    private _updateSibling;
    private _checkPreviousTag;
    private _checkNextTag;
    handleRadioKeyDown(event: KeyboardEvent): void;
    /**
    * access role when tag embedded in tag-list
    */
    private _getRole;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-tag': Cre8Tag;
    }
}
export default Cre8Tag;
//# sourceMappingURL=tag.d.ts.map