import { type Readable } from '@vielzeug/ripple';
import type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';
/** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */
export type TabsContext = {
    color: Readable<ThemeColor | undefined>;
    orientation: Readable<'horizontal' | 'vertical'>;
    size: Readable<ComponentSize | undefined>;
    value: Readable<string | undefined>;
    variant: Readable<SurfaceVariant | undefined>;
};
/** Injection key for the tabs context. */
export declare const TABS_CTX: import("@vielzeug/ore").InjectionKey<TabsContext>;
export type OreTabsEvents = {
    change: {
        value: string;
    };
};
export type OreTabsProps = {
    /**
     * Keyboard activation mode.
     * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).
     * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.
     */
    activation?: 'auto' | 'manual';
    /** Theme color */
    color?: ThemeColor;
    /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */
    label?: string;
    /** Tab list orientation */
    orientation?: 'horizontal' | 'vertical';
    /** Component size */
    size?: ComponentSize;
    /** Currently selected tab value */
    value?: string;
    /** Visual style variant */
    variant?: SurfaceVariant;
};
/**
 * Tabs container. Manages tab selection and syncs state to child tab items and panels.
 *
 * @element ore-tabs
 * @element ore-tab-item - Child element for tab buttons (auto-discovered)
 * @element ore-tab-panel - Child element for tab content (auto-discovered)
 *
 * @attr {string} value - The value of the currently selected tab
 * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'
 * @attr {string} size - Size: 'sm' | 'md' | 'lg'
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 *
 * @fires change - Emitted when the active tab changes with detail: { value: string }
 *
 * @slot tabs - Place `ore-tab-item` elements here
 * @slot - Place `ore-tab-panel` elements here
 *
 * @cssprop --tabs-radius - Border radius of the tablist container and panels
 * @cssprop --tabs-transition - Transition duration/easing for the active indicator
 * @cssprop --tabs-indicator-color - Color of the sliding active indicator line
 * @cssprop --tabs-bg - Background of the host element (flat variant)
 * @cssprop --tabs-tablist-bg - Tablist container background (solid/glass/frost variants)
 * @cssprop --tabs-tablist-border-color - Tablist container border color
 * @part tablist - Container that holds the slotted tab items
 * @part indicator - Active tab indicator element
 * @part panels - Container that holds tab panel content
 * @example
 * ```html
 * <ore-tabs value="tab1" variant="bordered">
 *   <ore-tab-item slot="tabs" value="tab1">Overview</ore-tab-item>
 *   <ore-tab-item slot="tabs" value="tab2">Settings</ore-tab-item>
 *   <ore-tab-panel value="tab1"><p>Overview content</p></ore-tab-panel>
 *   <ore-tab-panel value="tab2"><p>Settings content</p></ore-tab-panel>
 * </ore-tabs>
 * ```
 */
export declare const TABS_TAG: "ore-tabs";
//# sourceMappingURL=tabs.d.ts.map