import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
import { StyleInfo } from 'lit/directives/style-map.js';
import UiTab from './Tab.js';
import '../../icon-button/ui-icon-button.js';
import '../../divider/ui-divider.js';
import '../../icons/ui-icon.js';
export type TabsPriority = 'primary' | 'secondary';
export interface TabSelectionDetail {
    item: UiTab;
    index: number;
    select: string | null;
}
/**
 * Calculates value in percentages
 * @param w Element width
 * @param w0 Parent width
 * @return The percentage of element's width relative to parent.
 */
export declare function calcPercent(w: number, w0: number): number;
/**
 * A container for tabs.
 *
 * @fires select - A non bubbling event when selection change through user interaction.
 *                The `event.detail` object contains the `item` and `index` properties.
 *                It also has the `select` property with the value of the `selectedAttribute` on the tab.
 */
export default class UiTabs extends LitElement {
    items: UiTab[];
    activeItem: UiTab | null;
    previousItem: UiTab | null;
    protected accessor assignedElements: HTMLElement[];
    protected accessor pointer: HTMLElement;
    protected accessor content: HTMLElement;
    /**
     * The priority of the tabs.
     *
     * @default primary
     * @attribute
     */
    accessor priority: TabsPriority;
    /**
     * If true, tabs are scrollable and the tab width is based on the label width.
     * @attribute
     */
    accessor scrollable: boolean | undefined;
    /**
     * The value of the selected tab.
     * This is matched with the `aria-controls` of the tab.
     * @attribute
     */
    accessor selected: string | undefined;
    /**
     * The attribute on the `ui-tab` that indicates which value for `selected`
     * corresponds to which tab.
     *
     * @default aria-controls
     * @attribute
     */
    accessor selectedAttribute: string;
    protected accessor pointerStyles: StyleInfo | undefined;
    protected contentScroll?: number;
    protected accessor indicated: boolean;
    protected observer: IntersectionObserver;
    /**
     * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.
     * This we can properly visualize selection.
     */
    accessor isVisible: boolean | undefined;
    constructor();
    protected willUpdate(cp: PropertyValues<this>): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected intersectionCallback(entries: IntersectionObserverEntry[]): void;
    protected updateItems(): Promise<void>;
    /**
     * @return Whether the given element is a list item element.
     */
    protected isTabItem(element: Element): element is UiTab;
    protected isSelectable(element: UiTab): boolean;
    protected ensureSelection(): void;
    protected makeSelection(tab?: UiTab, focus?: boolean): void;
    notifySelect(item: UiTab): void;
    protected selectItem(tab: UiTab, focus?: boolean): void;
    protected deselectItem(tab: UiTab): void;
    protected handleVisibility(): void;
    protected positionPointer(tab: UiTab, old?: UiTab | null): Promise<void>;
    protected moveAnimation?: Animation;
    protected getPrimaryLeft(tab: UiTab): string;
    protected getSecondaryLeft(tab: UiTab): string;
    protected getPrimaryKeyframes(start: string, final: string): Keyframe[];
    protected getSecondaryKeyframes(start: string, final: string): Keyframe[];
    protected contentClickHandler(e: PointerEvent): void;
    protected contentKeyDownHandler(e: KeyboardEvent): void;
    protected activateFromEvent(e: Event): void;
    protected handleScrollLeft(): void;
    protected handleScrollRight(): void;
    protected handleScroll(e: Event): void;
    protected handleKeyDown(e: KeyboardEvent): void;
    getPreviousItem(item: UiTab): UiTab;
    getNextItem(item: UiTab): UiTab;
    render(): TemplateResult;
    protected renderSlot(): TemplateResult;
    protected renderIndicator(): TemplateResult;
    protected renderLeftScrollControl(): TemplateResult | typeof nothing;
    protected rightScrollControl(): TemplateResult | typeof nothing;
}
//# sourceMappingURL=Tabs.d.ts.map