import { Cre8Element } from '../cre8-element';
import '../icon/icon';
import '../button/button';
/**
 *
 * The accordion item component delivers large amounts of content in a small space
 * through progressive disclosure. That is, the user gets key details about the
 * underlying content and can choose to expand that content within the constraints
 * of the accordion item. Accordion Items work especially well on mobile interfaces or
 * whenever vertical space is at a premium.
 *
 * ## HOW TO USE
 * Avoid “nested” accordion items—that is, collapsible content within collapsible content.
 * This type of pattern goes against UX best practices.
 *
 * The Cre8 accordion item header allows for two sizes:
 * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]
 *
 * A chevron is used to indicate the “expand/collapse” action, though the entire
 * header area is clickable for the same action.
 *
 * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that
 * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.
 *
 * @slot The body of the accordion item will be any valid html
 * inserted between the cre8-accordion-item opening and closing tags.
 * @slot heading - Custom heading content, used when the `heading` property is not set.
 *
 *
 * @csspart ::part('header') - The container around the interactive header.
 * @csspart ::part('button') - The button containing the header text and the animated icon.
 * @csspart ::part('icon') - The animated icon that revolves on click.
 * @csspart ::part('body') - The container around the expanding body section.
 * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.
 *
 */
export declare class Cre8AccordionItem extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     *
     * When true, the Accordion Item is opens, when false it closes;
     * @prop {boolean} isActive
     *
     */
    isActive?: boolean;
    /**
     *
     * Optional custom id for the accordion item, if one is not set, a random id is generated for you.
     * @prop {string} accordionItemId
     *
     *
     */
    accordionItemId?: string;
    /**
     *
     * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text
     * and false/undefined default the icon to the opposite side of the accordion item
     * @prop {boolean} iconBefore
     *
     *
     */
    iconBefore?: boolean;
    /**
     *
     * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and
     * false/undefined renders the default secondary appearance.
     * @prop {boolean} tertiaryIcon
     *
     *
     */
    tertiaryIcon?: boolean;
    /**
     *
     * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].
     * @prop {'sm' | 'lg'} size
     *
     *
     */
    size: 'sm' | 'lg';
    /**
     *
     * Purely meant to help the user structure the HTML page hierarchy. Does not change the
     * header size. Defaults to 'h3'
     * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant
     *
     *
     */
    headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    /**
     *
     * Controls the text content of the Accordion Item heading.
     * @prop {string} heading
     *
     *
     */
    heading: string;
    /**
     *
     * Controls whether the header takes on the theme's 'brand-strong' color
     * @prop {boolean} brandHeader
     *
     *
     */
    brandHeader?: boolean;
    /**
     *
     * The aria attribute to which is assigned the id of the details section which is revealed via interaction
     * with the header.
     * @private _ariaControls
     *
     *
     */
    private _ariaControls;
    /**
     *
     * Private internal state which indicates the current _height of the accordion item panel.
     * @private _height
     *
     *
     */
    private _height;
    /**
     *
     * Private internal state which Indicates if the accordion item panel is completely open.
     * @private _fullyOpen
     *
     *
     */
    private _fullyOpen?;
    constructor();
    connectedCallback(): void;
    private _setContentHeight;
    private _toggleAccordionItem;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-accordion-item': Cre8AccordionItem;
    }
}
export default Cre8AccordionItem;
//# sourceMappingURL=accordion-item.d.ts.map