/**
 * ---------------------------------------------------------------------
 * 🔒 AUTOGENERATED BY VENDORISM
 * Removing this comment will prevent it from being managed by it.
 * ---------------------------------------------------------------------
 */
import '../../internal/scrollend-polyfill.js';
import SynergyElement from '../../internal/synergy-element.js';
import SynIconButton from '../icon-button/icon-button.component.js';
import SynResizeObserver from '../resize-observer/resize-observer.component.js';
import type { CSSResultGroup } from 'lit';
import type SynTab from '../tab/tab.js';
import type SynTabPanel from '../tab-panel/tab-panel.js';
/**
 * @summary Tab groups organize content into a container that shows one section at a time.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
 * @status stable
 * @since 2.0
 *
 * @dependency syn-icon-button
 *
 * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
 * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
 *
 * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
 * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tabs - The container that wraps the tabs.
 * @csspart active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart body - The tab group's body where tab panels are slotted in.
 * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
 * @csspart scroll-button--start - The starting scroll button.
 * @csspart scroll-button--end - The ending scroll button.
 * @csspart scroll-button__base - The scroll button's exported `base` part.
 *
 * @cssproperty --indicator-color - The color of the active tab indicator.
 * @cssproperty --indicator-width - The width of the active tab indicator.
 * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
 */
export default class SynTabGroup extends SynergyElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'syn-icon-button': typeof SynIconButton;
        'syn-resize-observer': typeof SynResizeObserver;
    };
    private activeTab?;
    private mutationObserver;
    private resizeObserver;
    tabs: SynTab[];
    private focusableTabs;
    panels: SynTabPanel[];
    private readonly localize;
    tabGroup: HTMLElement;
    body: HTMLSlotElement;
    nav: HTMLElement;
    indicator: HTMLElement;
    private hasScrollControls;
    private shouldHideScrollStartButton;
    private shouldHideScrollEndButton;
    /** The placement of the tabs. */
    placement: 'top' | 'start' | 'end';
    /**
     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
     */
    activation: 'auto' | 'manual';
    /** Disables the scroll arrows that appear when tabs overflow. */
    noScrollControls: boolean;
    /** Draws the tab group as a contained element. */
    contained: boolean;
    /** Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property */
    sharp: boolean;
    /** Prevent scroll buttons from being hidden when inactive. */
    fixedScrollControls: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private getActiveTab;
    private handleClick;
    private handleKeyDown;
    private handleScrollToStart;
    private handleScrollToEnd;
    private setActiveTab;
    private setAriaLabels;
    private repositionIndicator;
    private syncTabsAndPanels;
    private findNextFocusableTab;
    /**
     * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so
     * we add one pixel of wiggle room to our calculations.
     */
    private scrollOffset;
    private updateScrollButtons;
    private isScrolledToEnd;
    private scrollFromStart;
    updateScrollControls(): void;
    syncIndicator(): void;
    /** Shows the specified tab panel. */
    show(panel: string): void;
    preventFocus(e: MouseEvent): void;
    render(): import("lit").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'syn-tab-group': SynTabGroup;
    }
}