import '../../internal/scrollend-polyfill.js';
import TerraElement from '../../internal/terra-element.js';
import TerraIcon from '../icon/icon.component.js';
import type { CSSResultGroup } from 'lit';
/**
 * @summary Tabs organize content into a container that shows one section at a time.
 * @documentation https://terra-ui.netlify.app/components/tabs
 * @status stable
 * @since 1.0
 *
 * @dependency terra-icon
 *
 * @slot - Used for grouping tab panels in the tabs component. Must be `<terra-tab-panel>` elements.
 * @slot nav - Used for grouping tabs in the tabs component. Must be `<terra-tab>` elements.
 *
 * @event {{ name: String }} terra-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} terra-tab-hide - Emitted when a tab is hidden.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The tabs' navigation container where tabs are slotted in.
 * @csspart tabs - The container that wraps the tabs.
 * @csspart active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart body - The tabs' body where tab panels are slotted in.
 * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable.
 * @csspart scroll-button--start - The starting scroll button.
 * @csspart scroll-button--end - The ending scroll button.
 *
 * @cssproperty --terra-tabs-indicator-color - The color of the active tab indicator.
 * @cssproperty --terra-tabs-track-color - The color of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --terra-tabs-track-width - The width of the indicator's track (the line that separates tabs from panels).
 */
export default class TerraTabs extends TerraElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'terra-icon': typeof TerraIcon;
    };
    private activeTab?;
    private mutationObserver;
    private resizeObserver;
    private tabs;
    private focusableTabs;
    private panels;
    tabsElement: HTMLElement;
    body: HTMLSlotElement;
    nav: HTMLElement;
    indicator: HTMLElement;
    private hasScrollControls;
    private shouldHideScrollStartButton;
    private shouldHideScrollEndButton;
    /** The placement of the tabs. */
    placement: 'top' | 'bottom' | 'start' | 'end';
    /**
     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
     */
    activation: 'auto' | 'manual';
    /** Disables the scroll arrows that appear when tabs overflow. */
    noScrollControls: boolean;
    /** Prevent scroll buttons from being hidden when inactive. */
    fixedScrollControls: boolean;
    /** The size of the tabs. Can be overridden by individual tab components. */
    size: 'large' | 'small';
    connectedCallback(): void;
    disconnectedCallback(): void;
    private getAllTabs;
    private getAllPanels;
    private getActiveTab;
    private handleClick;
    private handleKeyDown;
    private handleScrollToStart;
    private handleScrollToEnd;
    private setActiveTab;
    private setAriaLabels;
    private repositionIndicator;
    private syncTabsAndPanels;
    private findNextFocusableTab;
    /**
     * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so
     * we add one pixel of wiggle room to our calculations.
     */
    private scrollOffset;
    private updateScrollButtons;
    private isScrolledToEnd;
    private scrollFromStart;
    updateScrollControls(): void;
    syncIndicator(): void;
    syncSize(): void;
    /** Shows the specified tab panel. */
    show(panel: string): void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'terra-tabs': TerraTabs;
    }
}