import { ComponentPublicInstance } from 'vue';
import { TabData } from '../../types';
/**
 * A layout for navigating between sections of content.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * The `name` of the currently active Tab in the layout.
     *
     * This prop is optional; if it is provided, it should be bound
     * using a `v-model:active` directive in the parent component.
     * Two-way binding the active tab is only necessary if some tab
     * other than the first should be active as soon as the component
     * renders (such as in cases where the active tab is bound to URL
     * params). If this prop is not provided, then the first tab will
     * be active by default. Regardless, the active tab can be changed
     * normally by user interaction (clicking on tab headings) or by
     * using the exposed methods "select", "next", and "prev".
     */
    active: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Whether or not the component should be displayed in a framed
     * visual style.
     */
    framed: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, {
    activeTab: import("vue").WritableComputedRef<string, string>;
    activeTabIndex: import("vue").ComputedRef<number>;
    activeTabId: import("vue").ComputedRef<string | undefined>;
    currentDirection: import("vue").Ref<import("../../types").HTMLDirection | null, import("../../types").HTMLDirection | null>;
    rootElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    tabListElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    prevScroller: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    nextScroller: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    rootClasses: import("vue").ComputedRef<{
        'cdx-tabs--framed': boolean;
        'cdx-tabs--quiet': boolean;
    }>;
    tabNames: import("vue").ComputedRef<string[]>;
    tabsData: import("vue").ComputedRef<Map<string, TabData>>;
    firstLabelVisible: import("vue").Ref<boolean, boolean>;
    lastLabelVisible: import("vue").Ref<boolean, boolean>;
    assignTemplateRefForTabButton: (templateRef: Element | ComponentPublicInstance | null, index: number) => void;
    scrollTabs: (logicalDirection: "prev" | "next") => void;
    focusActiveTab: () => void;
    cdxIconPrevious: import("@wikimedia/codex-icons").IconFlipForRtl;
    cdxIconNext: import("@wikimedia/codex-icons").IconFlipForRtl;
}, {}, {}, {
    /**
     * Programmatically select a tab based on its "name" prop
     *
     * @param {string} tabName The name of the tab to select
     * @param {boolean} setFocus Whether or not to also set focus to the new tab
     * @public
     */
    select(tabName: string, setFocus?: boolean): void;
    /**
     * Used to select next or previous tab in the sequence, skipping
     * over any tabs that are disabled. The provided increment should
     * be either 1 (to move forward) or -1 (to move backwards)
     *
     * @param index
     * @param increment
     * @param setFocus
     */
    selectNonDisabled(index: number, increment: -1 | 1, setFocus?: boolean): void;
    /**
     * Set the next tab to active, if one exists
     *
     * @param {boolean} setFocus
     * @public
     */
    next(setFocus?: boolean): void;
    /**
     * Set the previous tab to active, if one exists
     *
     * @param {boolean} setFocus
     * @public
     */
    prev(setFocus?: boolean): void;
    /**
     * Handle left arrow key navigation (based on LTR/RTL direction)
     */
    onLeftArrowKeypress(): void;
    /**
     * Handle right arrow key navigation (based on LTR/RTL direction)
     */
    onRightArrowKeypress(): void;
    /**
     * Handle down arrow key navigation by moving focus to the contents
     * of the currently active tab
     */
    onDownArrowKeypress(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:active"[], "update:active", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The `name` of the currently active Tab in the layout.
     *
     * This prop is optional; if it is provided, it should be bound
     * using a `v-model:active` directive in the parent component.
     * Two-way binding the active tab is only necessary if some tab
     * other than the first should be active as soon as the component
     * renders (such as in cases where the active tab is bound to URL
     * params). If this prop is not provided, then the first tab will
     * be active by default. Regardless, the active tab can be changed
     * normally by user interaction (clicking on tab headings) or by
     * using the exposed methods "select", "next", and "prev".
     */
    active: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Whether or not the component should be displayed in a framed
     * visual style.
     */
    framed: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{
    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
}>, {
    active: string;
    framed: boolean;
}, {}, {
    CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        action: {
            type: import("vue").PropType<import("../../types").ButtonAction>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
        };
        weight: {
            type: import("vue").PropType<import("../../types").ButtonWeight>;
            default: string;
            validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
        };
        size: {
            type: import("vue").PropType<import("../../types").ButtonSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
        };
    }>, {
        button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-button--framed': boolean;
            'cdx-button--icon-only': boolean;
            'cdx-button--is-active': boolean;
        }>;
        onClick: (event: Event) => void;
        onKeyDown: () => void;
        onKeyUp: () => void;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        action: {
            type: import("vue").PropType<import("../../types").ButtonAction>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
        };
        weight: {
            type: import("vue").PropType<import("../../types").ButtonWeight>;
            default: string;
            validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
        };
        size: {
            type: import("vue").PropType<import("../../types").ButtonSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        size: "medium" | "large" | "small";
        action: "default" | "progressive" | "destructive";
        weight: "normal" | "primary" | "quiet";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: import("vue").PropType<import("@wikimedia/codex-icons").Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: import("vue").PropType<string | null>;
            default: null;
        };
        dir: {
            type: import("vue").PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: import("vue").PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>, {
        rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-icon--flipped': boolean;
        }>;
        iconSvg: import("vue").ComputedRef<string>;
        iconPath: import("vue").ComputedRef<string>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: import("vue").PropType<import("@wikimedia/codex-icons").Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: import("vue").PropType<string | null>;
            default: null;
        };
        dir: {
            type: import("vue").PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: import("vue").PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>> & Readonly<{}>, {
        lang: string | null;
        iconLabel: string;
        dir: import("../../types").HTMLDirection | null;
        size: "medium" | "small" | "x-small";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;