import type { CSSResult } from 'lit';
import { Component } from '../../models';
import Tab from '../tab/tab.component';
import { type ElementStoreChangeTypes } from '../../utils/controllers/ElementStore';
import type { OrientationType } from '../list/list.types';
import type { BaseArray } from '../../utils/virtualIndexArray';
declare const TabList_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface & import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabListComponentMixin").TabListComponentMixinInterface> & typeof Component;
/**
 * Tab list organizes tabs into a container.
 *
 * Children of the tab list are `mdc-tab` elements, sent to the default slot.
 *
 * The tabs can be navigated using the left/right arrow keys, and selected by clicking,
 *  or pressing the Enter and Space keys.
 *
 * **Implicit accessibility rules**
 *
 * - The element that serves as the container for the set of tabs has role `tablist`.
 * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.
 * - The active tab element has the state `aria-selected` set to `true`
 *   and all other tab elements have it set to `false`.
 *
 *
 * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
 *
 * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
 * - The `tablist` element needs to have a label provided by `data-aria-label`.
 * - Each element with role `tab` has the property `aria-controls`
 *  that should refer to its associated `tabpanel` element.
 * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
 * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.
 *
 * @tagname mdc-tablist
 *
 * @dependency mdc-tab
 * @dependency mdc-button
 *
 * @event change - (React: onChange) This event is dispatched when the tab is selected.
 * Event that fires when user changes the active tab.
 *     The function sent as the argument will receive the fired event
 *      and the new tab id can be fetched from event.detail.tabId.
 *
 *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`
 *
 * @slot Default slot for mdc-tab elements.
 *
 * @cssproperty --mdc-tablist-gap - Gap between tabs
 * @cssproperty --mdc-tablist-width - Width of the tablist
 * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button
 *
 * @csspart container - The tablist container.
 */
declare class TabList extends TabList_base {
    /**
     * Label for the tablist.
     * This is used when the tablist does not have a visible label.
     */
    dataAriaLabel?: string;
    /**
     * @internal
     */
    protected get navItems(): BaseArray<Tab>;
    /**
     * @internal
     */
    private itemsStore;
    /**
     * @internal
     */
    protected orientation: OrientationType;
    /**
     * The tab container element.
     * Has the role of `tablist`.
     * @internal
     */
    private tabsContainer?;
    /**
     * Arrow button that is not focused.
     * @internal
     */
    private notFocusedArrowButton?;
    /**
     * Instead of using 'left' and 'right' for notation of the arrow buttons, we use 'forward' and 'backward'.
     * Since the elements of the tablist gets flipped in RTL layouts, the arrow buttons also flip.
     * For both RTL and LTR layouts, the forward arrow button moves the tabs in the forward direction.
     * i.e. the forward arrow button moves the tabs to the right in LTR layouts and to the left in RTL layouts.
     */
    /**
     * @internal
     */
    private showForwardArrowButton;
    /**
     * @internal
     */
    private showBackwardArrowButton;
    /**
     * @internal
     */
    private isRtl;
    /**
     * @internal
     */
    protected isValidItem(item: Element): boolean;
    /**
     * @internal
     */
    protected onElementStoreUpdate(item: Tab, changeType: ElementStoreChangeTypes, index: number): void;
    /**
     * Overriding the resetTabIndexAndSetFocus function to set the focus on the new active tab when the active tab changes.
     * Also, handle the visibility of the arrow buttons after resetting the tab indexes and setting the focus.
     * @internal
     */
    protected resetTabIndexAndSetFocus(newIndex: number, oldIndex?: number): boolean;
    constructor();
    /**
     * Set the initial active tab after firstUpdated,
     * since this.tabs (=slot) are only available after
     * the first update
     *
     * Also set up the event listeners.
     */
    protected firstUpdated(): Promise<void>;
    disconnectedCallback(): void;
    /**
     * Override focus to delegate to the active tab.
     * When a dialog focus-trap or any other caller invokes `.focus()` on the tablist host,
     * focus is forwarded directly to the active tab instead of landing on the shadow host.
     */
    focus(options?: FocusOptions): void;
    /**
     * When the tablist receives focus, then focus the active tab.
     *
     * @param event - Focus event.
     * @internal
     */
    private handleFocus;
    /**
     * Should the arrow button be shown.
     *
     * @internal
     *
     * @param direction - The direction of the arrow button.
     */
    private shouldShowArrowButton;
    /**
     * If an arrow button is in focus and it gets removed, switch focus to the opposite arrow button.
     * If both arrow buttons are removed, switch focus to the active tab.
     *
     * @internal
     */
    private switchFocus;
    /**
     * Show or hide the arrow buttons based on the position of the tabs
     * corresponding to the tab list.
     *
     * @internal
     */
    private handleArrowButtonVisibility;
    /**
     * Scroll tabs forward or backward.
     *
     * @internal
     *
     * @param direction - The direction to scroll the tabs in.
     */
    private scrollTabs;
    render(): import("lit-html").TemplateResult<1>;
    static styles: Array<CSSResult>;
    static shadowRootOptions: {
        delegatesFocus: boolean;
        clonable?: boolean;
        customElementRegistry?: CustomElementRegistry;
        mode: ShadowRootMode;
        serializable?: boolean;
        slotAssignment?: SlotAssignmentMode;
    };
}
export default TabList;
