import { TemplateResult } from 'lit';
import { BahtElement } from '../base.js';
/** One tab of `<baht-tabs>`; its panel is the child with `data-tab="<key>"`. */
export interface TabItem {
    key: string;
    label: string;
    disabled?: boolean;
    /** Short count or tag shown after the label ("3", "New"). */
    badge?: string;
}
/**
 * Tabs (APG tab pattern). The tab strip comes from `tabs`; the panels are your own children,
 * matched by `data-tab="<key>"` — they get `role="tabpanel"`, ids and `hidden` for you.
 *
 *   <baht-tabs label="Ticket">
 *     <section data-tab="details">…</section>
 *     <section data-tab="history">…</section>
 *   </baht-tabs>
 *   el.tabs = [{ key: 'details', label: 'Details' }, { key: 'history', label: 'History', badge: '3' }];
 *   el.addEventListener('baht-change', (e) => (location.hash = e.detail.value));
 *
 * `value` is the selected key (the first enabled tab when unset or unknown). Keyboard: ←/→
 * move between tabs (wrapping, skipping disabled), Home/End jump; with `activation="manual"`
 * the arrows only move focus and Enter/Space selects. Only the selected tab is in the Tab order.
 *
 * @fires baht-change - The user selected a tab. `detail: { value }`. Setting `value` does not fire it.
 */
export declare class BahtTabs extends BahtElement {
    /** The tab strip. Set as a property: `el.tabs = [...]`. */
    tabs: TabItem[];
    /** Selected tab key. */
    value: string;
    /** Accessible name of the tab list. */
    label: string;
    /** `automatic` (default): arrows select. `manual`: arrows focus, Enter/Space selects. */
    activation: 'automatic' | 'manual';
    /** `line` (default): an underline strip. `pill`: rounded chips; the active fill is `--baht-tabs-pill-active`. */
    variant: 'line' | 'pill';
    private panelKeys;
    private panelsEl;
    private tabId;
    private panelId;
    /** The tab actually shown: `value` when it names an enabled tab, else the first enabled one. */
    get selected(): string;
    protected firstUpdated(): void;
    protected updated(): void;
    private syncPanels;
    private select;
    private focusTab;
    private readonly onKeydown;
    protected render(): TemplateResult;
}