melt/dist/builders/Tabs.svelte.d.ts

The next generation of Melt UI. Built for Svelte 5.

import type { MaybeGetter } from "../types";
export type TabsProps<T extends string = string> = {
    /**
     * If `true`, the value will be changed whenever a trigger is focused.
     *
     * @default true
     */
    selectWhenFocused?: MaybeGetter<boolean | undefined>;
    /**
     * If the the trigger selection should loop when navigating with the arrow keys.
     *
     * @default true
     */
    loop?: MaybeGetter<boolean | undefined>;
    /**
     * The orientation of the tabs.
     *
     * @default "horizontal"
     */
    orientation?: MaybeGetter<"horizontal" | "vertical" | undefined>;
    /**
     * The default value for `tabs.value`
     *
     * When passing a getter, it will be used as source of truth,
     * meaning that `tabs.value` only changes when the getter returns a new value.
     *
     */
    value: MaybeGetter<T>;
    /**
     * Called when the `Tabs` instance tries to change the active tab.
     */
    onValueChange?: (active: T) => void;
};
export declare class Tabs<T extends string = string> {
    #private;
    readonly selectWhenFocused: boolean;
    readonly loop: boolean;
    readonly orientation: "horizontal" | "vertical";
    constructor(props: TabsProps<T>);
    /** The current selected tab. */
    get value(): T;
    set value(value: T);
    /** The attributes for the list that contains the tab triggers. */
    get triggerList(): {
        readonly "data-melt-tabs-trigger-list": "";
        readonly role: "tablist";
        readonly "aria-orientation": "horizontal" | "vertical";
        readonly "data-orientation": "horizontal" | "vertical";
    };
    /** Gets the attributes and listeners for a tab trigger. Requires an identifying tab value. */
    getTrigger(value: T): {
        readonly "data-melt-tabs-trigger": T;
        readonly "data-active": "" | undefined;
        readonly tabindex: 0 | -1;
        readonly role: "tab";
        readonly "aria-selected": boolean;
        readonly "aria-controls": string;
        readonly "data-orientation": "horizontal" | "vertical";
        readonly onclick: () => T;
        readonly onkeydown: (e: KeyboardEvent) => void;
        readonly id: string;
    };
    /** Gets the attributes and listeners for the tabs contents. Requires an identifying tab value. */
    getContent(value: T): {
        readonly "data-melt-tabs-content": "";
        readonly hidden: boolean;
        readonly "data-active": "" | undefined;
        readonly role: "tabpanel";
        readonly id: string;
        readonly "aria-labelledby": string;
        readonly "data-orientation": "horizontal" | "vertical";
    };
}