import { PropertyValues } from 'lit';
import { DDSElement } from "../../base/index.js";
/**
 * The tabs component manages a group of tab components and switches the content displayed using the panel switcher component.
 * It allows users to navigate between different sections of content by clicking on individual tabs.
 *
 * > [!WARNING]
 * > At least one tab must be available (that means, the tab must be present and enabled).
 * > Otherwise, unexpected behavior may be encountered.
 *
 * Hierarchies:
 * - `daikin-tabs` > `daikin-tab`
 * - `daikin-tabs` > `daikin-tab-panels` ("panels" slot)
 *
 * @fires beforechange - _Cancellable._ A custom event emitted when the current tab is about to be changed by user interaction. The current value can be obtained with `event.target.value` and the new value with `event.detail.newTab.value`.
 * @fires change - A custom event emitted when the current tab is changed. The new value can be obtained with `event.target.value`.
 *
 * @slot - A slot for tab buttons. Place `daikin-tab` elements here.
 * @slot panels - A slot for tab panels component. Place a `daikin-tab-panels` element here.
 *
 * @example
 *
 * ```js
 * import "@daikin-oss/design-system-web-components/components/tab/index.js";
 * import "@daikin-oss/design-system-web-components/components/tabs/index.js";
 * import "@daikin-oss/design-system-web-components/components/tab-panels/index.js";
 * ```
 *
 * ```html
 * <daikin-tabs value="foo">
 *   <daikin-tab value="foo">Foo tab</daikin-tab>
 *   <daikin-tab value="bar">Bar tab</daikin-tab>
 *   <!-- At least one "daikin-tab-panels" is needed to switch the content. -->
 *   <daikin-tab-panels slot="panels">
 *     <!-- Mind the "panel:" prefix. -->
 *     <p slot="panel:foo">Foo tab content.</p>
 *     <p slot="panel:bar">Bar tab content.</p>
 *   </daikin-tab-panels>
 * </daikin-tabs>
 * ```
 */
export declare class DaikinTabs extends DDSElement {
    static readonly styles: import('lit').CSSResult;
    /**
     * `value` of the currently selected tab (`daikin-tab`).
     */
    value: string;
    /**
     * Whether the tab width stretches or fits.
     *
     * @default "stretch"
     */
    sizing: "stretch" | "fit";
    /**
     * Tab(s) in the default slot.
     */
    private readonly _tabs;
    /**
     * Panel switcher(s) in the `panels` slot.
     */
    private readonly _panelSwitchers;
    /**
     * Emits `beforechange` event if necessary and returns whether we should proceed.
     *
     * 1. Check if `newTab.value` is different from `value`.
     * 2. Emit "beforechange" event.
     * 3. Check and return whether the event is canceled.
     *
     * @param newTab The newly active tab element.
     * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
     */
    private _emitBeforeChange;
    /**
     * Updates `this.value` and emit "change" event.
     *
     * @param newTab The newly active tab element.
     */
    private _updateValue;
    /**
     * Updates `daikin-tab` component(s)' properties in the slot.
     *
     * Invoke when:
     * - `this.value` is changed.
     * - the default slot's content is changed.
     */
    private _updateTabs;
    private _updateTabStyle;
    /**
     * Updates `daikin-tab-panels` component(s)' properties in the slot.
     *
     * Invoke when:
     * - `this.value` is changed.
     * - the default slot's content is changed.
     * - the panel slot's content is changed.
     */
    private _updateTabPanels;
    /**
     * Handles "click" event emitted by `daikin-tab` component.
     */
    private _handleTabClick;
    /**
     * Handles keyboard interactions in the tab list.
     */
    private _handleKeyDown;
    private _handleSlotChange;
    private _handleTabPanelsSlotChange;
    render(): import('lit-html').TemplateResult<1>;
    updated(changedProperties: PropertyValues<this>): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "daikin-tabs": DaikinTabs;
    }
}