/**
 * Tabs Component
 *
 * A carousel-based tabs component with smooth animations and fixed container dimensions.
 * Features horizontal sliding transitions, smart positioning marker, and independent panel scrolling.
 *
 * Features:
 * - Carousel animation with smooth sliding transitions
 * - Fixed dimensions prevent layout shift between tabs
 * - Animated marker that follows active tab button
 * - Rich label support via slots (icons, badges, custom content)
 * - Custom marker slot for complete active tab styling control
 * - Independent panel scrolling with scroll position reset
 * - ResizeObserver for responsive percentage widths
 * - Smart rendering - only updates DOM when necessary
 * - Accessibility with ARIA roles and attributes
 * - Top/bottom placement for tab buttons
 *
 * @example
 * <!-- Basic tabs with text labels -->
 * <ty-tabs width="800px" height="600px" active="general">
 *   <ty-tab id="general" label="General Settings">
 *     <div class="p-6">General content...</div>
 *   </ty-tab>
 *   <ty-tab id="advanced" label="Advanced Settings">
 *     <div class="p-6">Advanced content...</div>
 *   </ty-tab>
 * </ty-tabs>
 *
 * @example
 * <!-- Rich labels with icons and badges -->
 * <ty-tabs width="800px" height="600px">
 *   <!-- Rich label as direct child -->
 *   <span slot="label-profile" class="flex items-center gap-2">
 *     <ty-icon name="user" size="sm"></ty-icon>
 *     Profile
 *   </span>
 *
 *   <span slot="label-notifications" class="flex items-center gap-2">
 *     <ty-icon name="bell" size="sm"></ty-icon>
 *     Notifications
 *     <span class="ty-bg-danger ty-text-danger++ px-2 py-0.5 rounded-full text-xs">5</span>
 *   </span>
 *
 *   <!-- Tab panels -->
 *   <ty-tab id="profile">...</ty-tab>
 *   <ty-tab id="notifications">...</ty-tab>
 * </ty-tabs>
 *
 * @example
 * <!-- Custom marker styling -->
 * <ty-tabs width="100%" height="400px">
 *   <!-- Gradient marker slot -->
 *   <div slot="marker" style="
 *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 *     border-radius: 0.5rem;
 *     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 *   "></div>
 *
 *   <ty-tab id="tab1" label="Dashboard">...</ty-tab>
 *   <ty-tab id="tab2" label="Analytics">...</ty-tab>
 * </ty-tabs>
 */
/**
 * Tabs container attributes configuration
 */
export interface TabsAttributes {
    width: string;
    height: string;
    active: string | null;
    placement: 'top' | 'bottom';
}
/**
 * Tab change event detail
 */
export interface TabChangeDetail {
    activeId: string;
    activeIndex: number;
    previousId: string | null;
    previousIndex: number | null;
}
/**
 * TyTabs Web Component
 */
export declare class TyTabs extends HTMLElement {
    /** Observed attributes */
    static get observedAttributes(): string[];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
}
//# sourceMappingURL=tabs.d.ts.map