import { LitElement, PropertyValues } from "lit";
import { WarpTab } from "../tab/tab.js";
export type WarpTabsChangeEvent = CustomEvent<{
    panelId: string;
}>;
/**
 * Tabs are used to organize content by grouping similar information on the same page.
 *
 * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
 *
 * @event {WarpTabsChangeEvent} change - Includes `details.panelId` with the now active tab panel's ID
 */
export declare class WarpTabs extends LitElement {
    static styles: import("lit").CSSResult[];
    /**
     * The `id` of the panel that should be active.
     *
     * @default "" (Shows the first tab)
     */
    active: string | undefined;
    private tabList;
    private selectionIndicator;
    private _uniqueId;
    private _activeTabFor;
    private _resizeObserver?;
    private _updateSelectionIndicatorDebounced;
    private _assignSlots;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    updated(changedProperties: PropertyValues<this>): void;
    /** @internal */
    get tabs(): WarpTab[];
    /** @internal */
    get activeTab(): WarpTab;
    private _initializeActiveTab;
    private _handleTabClick;
    private _notifyTabChange;
    private updateSelectionIndicator;
    private updatePanels;
    private _handleKeyDown;
    private get _tabCount();
    private get _gridClass();
    render(): import("lit").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        "w-tabs": WarpTabs;
    }
}