import { PropertyValueMap } from "lit";
import { FRoot } from "../../mixins/components/f-root/f-root";
import { Ref } from "lit/directives/ref.js";
import type { FDiv } from "../f-div/f-div";
export type FTagStateProp = "primary" | "neutral" | "success" | "warning" | "danger" | "inherit" | `custom, ${string}`;
export type FTagCategory = "fill" | "outline";
/**
 * @summary Tags allow users to categorize the content. They can be used to add metadata to an element such as category, or property or show a status.
 */
export declare class FTag extends FRoot {
    /**
     * css loaded from scss file
     */
    static styles: import("lit").CSSResult[];
    /**
     * @attribute boolean for inherited class
     */
    tagSystemIcon: boolean;
    /**
     * @attribute local state for managing custom fill.
     */
    fill: string;
    /**
     * @attribute label property defines the text label on a tag. Label of a tag is always uppercase.
     */
    label: string;
    /**
     * @attribute The medium size is the default and recommended option.
     */
    size?: "large" | "medium" | "small";
    /**
     * @attribute category defined background and border
     */
    category?: FTagCategory;
    /**
     * @attribute The states on tags are to indicate various degrees of emphasis of the action.
     */
    state?: FTagStateProp;
    /**
     * @attribute Icon-left enables an icon on the left of the label of a tag.
     */
    iconLeft?: string;
    /**
     * @attribute Icon-right enables an icon on the right of the label of a tag.
     */
    iconRight?: string;
    /**
     * @attribute Counter property enables a counter on the tag.
     */
    counter?: number;
    /**
     * @attribute Loader icon replaces the content of the tag .
     */
    loading?: boolean;
    /**
     * @attribute Loader icon replaces the content of the tag .
     */
    selected?: boolean;
    /**
     * @attribute The disabled attribute can be set to keep a user from clicking on the tag.
     */
    disabled?: boolean;
    /**
     * @attribute is clickable
     */
    clickable?: boolean;
    /**
     * @attribute is clickable
     */
    maxWidth: string;
    labelDiv: Ref<FDiv>;
    /**
     * compute icon size based on tag size
     */
    get iconSize(): "small" | "medium" | "x-small";
    /**
     * compute textColor when custom color of tag is defined.
     */
    get textColor(): "#202a36" | "#fcfcfd";
    /**
     * compute loaderColor when custom color of tag is defined.
     */
    get loaderColor(): "#808080" | "#202a36";
    /**
     * apply inline styles to shadow-dom for custom fill.
     */
    applyStyles(): string;
    /**
     * validation for all atrributes
     */
    validateProperties(): void;
    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
}
/**
 * Required for typescript
 */
declare global {
    interface HTMLElementTagNameMap {
        "f-tag": FTag;
    }
}
