import { Cre8Element } from '../cre8-element';
/**
 *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6
 *  is the least important in the content hierarchy.
 *
 * # How to Use
 * 1. The cre8-heading tag wraps around one of the six native HTML "h" tags, depending on your chosen variation.
 * 2. There are two main use cases for using this component:
 *    text passage headings and Components with a title (i.e. modal, card or alert)
 * 3. There will be instances when the design requires the heading text to have the brand color applied
 *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)
 *    attribute to true on the cre8-heading tag.
 * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)
 *    attribute to the tag for white text.
 *
 *
 * @slot - The heading text content
 */
export declare class Cre8Heading extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * Heading type
     * <cre8-text-passage size="small">
     * <ul>
     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>
     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>
     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>
     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>
     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>
     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>
     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>
     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>
     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>
     * <li>**label-large** renders a heading with the label-large preset treatment</li>
     * <li>**label** renders a heading with the label preset treatment</li>
     * <li>**label-small** renders a heading with the label-small preset treatment</li>
     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>
     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>
     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>
     * </ul>
     * </cre8-text-passage>
     */
    type?: 'display-default' | 'display-small' | 'headline-large' | 'headline-default' | 'headline-small' | 'title-xlarge' | 'title-large' | 'title-default' | 'title-small' | 'label-large' | 'label-default' | 'label-small' | 'meta-large' | 'meta-default' | 'meta-small';
    /**
     * Dynamic tag name for the component
     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page
     * <cre8-text-passage size="small">
     * <ul>
     * <li>**h1** renders an `h1` tag</li>
     * <li>**h2** renders an `h2` tag. This is the default</li>
     * <li>**h3** renders an `h3` tag</li>
     * <li>**h4** renders an `h4` tag</li>
     * <li>**h5** renders an `h5` tag</li>
     * <li>**h6** renders an `h6` tag</li>
     * </ul>
     * </cre8-text-passage>
     *
     * @attr{string}
     */
    tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    /**
     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.
     *
     * @attr{boolean}
     */
    inverted?: boolean;
    /**
     * Apply the brand color to the heading text.
     *
     * @attr{boolean}
     */
    brandColor?: boolean;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-heading': Cre8Heading;
    }
}
export default Cre8Heading;
//# sourceMappingURL=heading.d.ts.map