import { PropertyValues } from 'lit';
import { Cre8FormElement } from '../cre8-form-element';
import '../icon/icon';
/**
 * The Select Tile component is a short block of content inside a visual
 * container that can be used in place of checkboxes, radio buttons, and
 * links.  It allows you to add more descriptive and visually appealing
 * content for these actions while letting you compare different choices
 * either side-by-side or on top of each other.
 *
 * Typically you could use the "header" slot for an icon, and the "title"
 * and "body" slots for a content title and body text below it.
 *
 * The css parts are shown here wrapped in ::part() because otherwise Storybook
 * won't render them and the slots if they have the same name.
 * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part
 *
 * @fires change
 * @fires input
 * @slot "" - The default slot goes into the center, main part of the Select Tile.
 *         Consider using title and body instead.
 * @slot "header" - The top or left part of the Select Tile
 * @slot footer - The bottom or right part of the Select Tile
 * @slot title - The title part of the Select Tile, use with body slot and
 *               instead of the default slot for appropriate typography.
 * @slot "body" - The "body" part of the Select Tile, which appears under
 *                the title slot and receives apporpriate typography.
 *
 * @csspart ::part(select-tile) - The main wrapping element
 * @csspart ::part(header) - The header element wrapping the left or top element
 * @csspart ::part(footer) - The footer element wrapping the right element
 * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot
 * @csspart ::part(body-title) - The element that wraps the "title" slot
 * @csspart ::part(body-body) - The element that wraps the "body" slot
 *
*/
export declare class Cre8SelectTile extends Cre8FormElement {
    static shadowRootOptions: {
        delegatesFocus: boolean;
        clonable?: boolean;
        customElementRegistry?: CustomElementRegistry;
        mode: ShadowRootMode;
        serializable?: boolean;
        slotAssignment?: SlotAssignmentMode;
    };
    private _controller;
    /**
     * Should this Select Tile behave as a radio button or a checkbox?
     */
    type: 'radio' | 'checkbox';
    /**
     * Get the radio field item input
     */
    field: HTMLInputElement;
    static styles: import("lit").CSSResult[];
    /**
     * Style variants
     * - **bare** renders a select-tile without a border and without padding around the content
     * - **horizontal** renders a select-tile with header, body, footer oriented in a row rather than a column
     * - **horizontal-bare** renders a select-tile with header, body, footer
     *   oriented in a row rather than a column without a border and without padding around the content
     */
    variant?: 'bare' | 'horizontal' | 'horizontal-bare';
    /**
     * Which breakpoint, if any, to switch to verticial.
     * Only useful for horizontal variants. Defaults to 'sm'.
     */
    variantBreakToVertical: 'sm' | 'sm-2' | 'md' | 'lg' | 'xl' | 'xxl' | 'none';
    /**
     * Where does the checkmark or radio button go?
     * It disappears on 'none'. Only top-right is supported for vertical variants.
     */
    checkPosition: 'left' | 'right' | 'top-right' | 'none';
    /**
     * In radio mode, whether to use the circle with the dot, or the rounded check.
     */
    radioVariant: 'dot' | 'check';
    /**
     * Align variants
     * <cre8-text-passage size="sm">
     * <ul>
     * <li>**center** renders a select-tile that has center aligned content/text</li>
     * </ul>
     * </cre8-text-passage>
     */
    align?: 'center';
    /**
     * Error State
     */
    isError?: boolean;
    /**
     * Disabled State
     */
    disabled?: boolean;
    /**
     * Required attribute
     */
    required?: boolean;
    /**
     * Checked State.
     * Note: the `checked` attribute sets the `defaultChecked` property, as well
     * as sets the initial value for the `checked` property.
     */
    checked?: boolean;
    /**
     * The default checked state when the element first renders or is reset.
     *
     * Note: the attribute is named `checked` and the property is
     * named `defaultChecked`. This is the same as a regular radio button.
     */
    defaultChecked: boolean;
    /**
     * Select Tile FieldId
     */
    fieldId?: string;
    /**
     * Radio item fieldnote aria describe by
     */
    private ariaDescribedBy?;
    /**
     * Radio item fieldnote isSuccess
     */
    isSuccess?: boolean;
    /**
     * The form associated with this field
     *
     * TOOD: maybe this goes on Cre8FormElement
     */
    get form(): HTMLFormElement;
    /**
     * Connected callback lifecycle
     * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
     * 2) Initialize the correct controller
     */
    connectedCallback(): void;
    /**
     * Reset form callback
     * 1) Remove the checked state from all radio elements
     * 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;
    /**
     * Whenever the "checked" property changes, update our form value, aria-checked,
     * and the checked property of `this.field`.
     *
     */
    updated(changedProps: PropertyValues): void;
    renderInput(): import("lit-html").TemplateResult<1>;
    renderCheckboxIcon(): import("lit-html").TemplateResult<1>;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-select-tile': Cre8SelectTile;
    }
}
export default Cre8SelectTile;
//# sourceMappingURL=select-tile.d.ts.map