import { TemplateResult } from 'lit-html';

/**
 * Event detail for tab change events
 */
interface TabChangeEventDetail {
    /** The index of the active tab */
    index: number;
    /** The tab id */
    id: string;
    /** The original event */
    event: Event;
}
/**
 * Panel component - visual container with optional tabs and header actions.
 *
 * Use this component when you want the panel UI without state management,
 * or wrap it around `<ease-state>` for full functionality.
 *
 * @tag ease-panel
 *
 * @slot headline - Panel title text (hidden when tabs are present)
 * @slot actions - Header action buttons, links, or dropdowns
 * @slot - Default slot for main content
 * @slot tab-{id} - Tab panel content (use `data-tab-label` for display name)
 * @slot footer - Footer content below all panels
 *
 * @csspart section - Outer container
 * @csspart header - Header row containing headline/tabs and actions
 * @csspart headline - Title element
 * @csspart tabs - Tab button container
 * @csspart tab - Individual tab button
 * @csspart actions - Actions container
 * @csspart content - Content wrapper (handles height animations)
 * @csspart body - Inner body container
 * @csspart items - Grid container for slotted content
 * @csspart tab-panel - Individual tab panel
 * @csspart footer - Footer container
 *
 * @fires tab-change - Fired when the active tab changes
 */
declare class Panel extends HTMLElement {
    #private;
    requestRender: () => void;
    accessor activeTab: number;
    accessor headline: string | null;
    accessor maxHeight: string | null;
    /** @internal */
    handleActiveTabChange(previous: number, next: number): void;
    accessor contentElement: HTMLElement | null;
    accessor bodyElement: HTMLElement | null;
    /**
     * Get the tab configuration
     */
    get tabs(): ReadonlyArray<{
        id: string;
        label: string;
    }>;
    /**
     * Switch to a specific tab by index
     * @param index - The tab index (0-based)
     */
    setTab(index: number): void;
    connectedCallback(): void;
    afterRender(): void;
    render(): TemplateResult;
    performTabAnimation(fromIndex: number, toIndex: number): Promise<void>;
    onFooterSlotChange(): void;
    onDefaultSlotChange(): void;
    private updateFooterAttribute;
}

export { Panel as P, type TabChangeEventDetail as T };