import type { TemplateResult } from 'lit';
import { LitElement } from 'lit';
import '../spinner/Spinner.js';
declare const Button_base: (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
/**
 * Buttons are used for interface actions. Primary style should be
 * used only once per section for main call-to-action, while other
 * styles can appear more frequently.
 *
 * @status ready
 * @category action
 * @slot - The button content
 * @slot start - Used to place content at the start of button text. Typically used for icons.
 * @slot end - Used to place content at the end of button text. Typically used for icons.
 *
 * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).
 * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).
 * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.
 * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).
 * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).
 * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.
 * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).
 * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).
 * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.
 * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).
 * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).
 * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).
 * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.
 * @cssprop [--n-button-user-select=none] - Controls the text selection behavior of the button text.
 */
export default class Button extends Button_base {
    static styles: import("lit").CSSResult[];
    private defaultSlot;
    private buttonRef;
    private events;
    private lightDom;
    /**
     * The style variant of the button.
     */
    variant: 'default' | 'primary' | 'dashed' | 'plain' | 'danger';
    /**
     * The type of the button.
     */
    type: 'button' | 'submit' | 'reset';
    /**
     * The size of the button.
     * This affects font-size and padding.
     */
    size: 's' | 'm' | 'l';
    /**
     * This does not need to be documented,
     * since it is only for forwarding the aria-expanded attribute
     * to the internal button element.
     * @private
     */
    accessibleExpanded?: 'true' | 'false';
    /**
     * This does not need to be documented,
     * since it is only for forwarding the aria-haspopup attribute
     * to the internal button element.
     * @private
     */
    accessibleHasPopup?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
    /**
     * When provided, renders the button as a link,
     * with its href attribute set to the given value.
     */
    href?: string;
    /**
     * When provided together with a href property, the button will
     * trigger a file download instead of a page visit.
     */
    download: boolean;
    /**
     * When provided together with a href property, determines where
     * to open the linked URL. The keywords have special meanings for
     * where to load the URL: “_self” means the current browsing context,
     * “_blank” usually a new tab but users can configure browsers this to
     * open a new window instead, “_parent” means the parent browsing
     * context of the current one, but if no parent exists, behaves as
     * _self, and finally “top” means the topmost browsing context.
     */
    target: '_self' | '_blank' | '_parent' | '_top';
    /**
     * Controls whether the button expands to fill the width of its container.
     */
    expand: boolean;
    /**
     * When provided, the button is rendered as a square button. Use this for icon only buttons.
     */
    square: boolean;
    /**
     * Controls whether the button is in loading state. Please note that the spinner
     * is hidden from assistive technologies, so you need to make sure to announce
     * the loading state to e.g. screen reader users. We also recommend disabling
     * all user interactions on the button itself while in loading state.
     */
    loading: boolean;
    /**
     * Controls whether the `interface-dropdown-small` icon from Nordicons is hidden
     * in the `end` slot when used as a dropdown toggle.
     */
    hideDropdownIcon: boolean;
    connectedCallback(): void;
    render(): TemplateResult<1>;
    /**
     * We jump through some hoops here to ensure the link is treated correctly when "disabled".
     * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.
     * Along with the advice in the article below, we also set tabindex to "-1", so it is taken out of tab order.
     *
     * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html
     */
    private renderLink;
    private renderButton;
    private renderLightDom;
    private handleOuterClick;
    private handleClick;
    /**
     * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.
     * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.
     */
    private handleProxyChange;
}
declare global {
    interface HTMLElementTagNameMap {
        'nord-button': Button;
    }
}
export {};