import type { States } from '../common/fsm.js';
import { LitElement } from 'lit';
import '../nav-toggle/NavToggle.js';
declare const navMachine: {
    transition(currentState: "closed" | "opened" | "peek" | "unpeek" | "wait" | "blocked", event: "click" | "close" | "focusin" | "focusout" | "pointerenter" | "pointerleave" | "toggle" | "transitionend" | "open" | "dropdownOpen" | "dropdownClose" | "timeout"): "closed" | "opened" | "peek" | "unpeek" | "wait" | "blocked";
};
type NavState = States<typeof navMachine>;
/**
 * Layout component is used to create the main layout of an app. Layout
 * currently comes with one main configuration: two-column.
 *
 * @status ready
 * @category structure
 * @slot - The default main section content.
 * @slot nav - Used to place content inside the navigation sidebar.
 * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.
 * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.
 * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.
 * @slot drawer - Used to place additional content/details relating to a selected item.
 * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.
 *
 * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).
 * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.
 * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).
 */
export default class Layout extends LitElement {
    static styles: import("lit").CSSResult[];
    private peekTimeoutId?;
    private navSlot;
    private drawerSlot;
    private topBarSlot;
    private headerSlot;
    private footerSlot;
    private direction;
    private events;
    private lightDismiss;
    private broadcast;
    private navEl;
    private navWidth;
    private isDragging;
    private navState;
    private wideScreen;
    /**
     * Controls whether the navigation is hidden off-screen or not.
     * Defaults to `true` for wide viewports, and `false` otherwise.
     */
    navOpen: boolean;
    /**
     * Controls whether the navigation's open/closed state is persisted across page loads.
     * This is useful for multi-page apps, where clicks on links trigger a full page load.
     */
    persistNavState: boolean;
    /**
     * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.
     * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.
     */
    syncNavState: boolean;
    /**
     * Controls the padding of the default main section slot. When set to “none”,
     * the nav and header slots will still have padding.
     */
    padding: 'm' | 'none';
    /**
     * Controls whether the layout's header has sticky positioning.
     */
    sticky: boolean;
    /**
     * Controls whether the layout's footer has sticky positioning.
     */
    stickyFooter: boolean;
    /**
     * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.
     * A narrow viewport is considered to be less than 768px wide.
     */
    get isNarrow(): boolean;
    connectedCallback(): void;
    willUpdate(): void;
    render(): import("lit").TemplateResult<1>;
    private renderNavToggle;
    private renderNavCollapse;
    protected handleNavWidthChange(): void;
    protected handleNavStateChange(prev: NavState): void;
    protected handleOpenChange(prev: boolean): void;
    private navTransition;
    private handleNavClick;
    private handleMainClick;
    private handleDropdownOpen;
    private handleDropdownClose;
    private handleMediaQueryChange;
    private handleToggleClick;
    private handleNavFocus;
    private handleMainFocus;
    private handleMouseEnter;
    private handleMouseLeave;
    private handleTransitionEnd;
    private handleKeyboardResize;
    private setNavWidth;
    private startDragging;
    private stopDragging;
    private handleDrag;
}
declare global {
    interface HTMLElementTagNameMap {
        'nord-layout': Layout;
    }
}
export {};