ranui/dist/components/tab/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { RanElement } from '@/utils/index';
import { EventManager } from '@/utils/builder';
export declare class Tabs extends RanElement {
    static get observedAttributes(): string[];
    _events: EventManager;
    _container: HTMLDivElement;
    _header: HTMLDivElement;
    _nav: HTMLDivElement;
    _line: HTMLDivElement;
    _content: HTMLDivElement;
    _wrap: HTMLDivElement;
    _slot: HTMLSlotElement;
    _shadowDom: ShadowRoot;
    _tabsId: number;
    tabHeaderKeyMapIndex: Record<string, number>;
    constructor();
    get align(): string;
    set align(value: string);
    get type(): string;
    set type(value: string);
    get active(): string | null;
    set active(value: string | null);
    get effect(): string | null;
    set effect(value: string | null);
    get sheet(): string;
    set sheet(value: string);
    handlerExternalCss: () => void;
    initTabHeaderKeyMapIndex: (key: string, index: number) => void;
    createTabHeader(tabPane: Element, index: number): HTMLElement;
    initTabLineAlignCenter: () => void;
    initTabLineAlignEnd: () => void;
    setTabLine: (key: string) => void;
    setTabContent: (key: string) => void;
    clickTabHead: (e: Event) => void;
    /** Select a tab by key: move the indicator, slide content, update classes + ARIA. */
    activateKey: (key: string) => void;
    /** The header's focusable/semantic element — the r-button's inner `_btn`. */
    tabFocusable: (header: Element) => HTMLElement;
    tabIdFor: (key: string) => string;
    panelIdFor: (key: string) => string;
    /**
     * Wire the WAI-ARIA tabs relationships: each header becomes role="tab" (on the
     * button's inner focusable element, so it isn't a nested role="button"), with
     * aria-selected + a roving tabindex (only the active tab is tabbable); each pane
     * becomes role="tabpanel" labelled by its tab. Called on slot changes and every
     * selection change.
     */
    syncTabsAria: () => void;
    /** Roving arrow-key navigation over the tablist, with automatic activation. */
    onNavKeydown: (e: KeyboardEvent) => void;
    updateAttribute: (key: string, attribute: string, value?: string | null) => void;
    initActive: () => void;
    listenSlotChange: () => void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
}
export default Tabs;