ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
72 lines (71 loc) • 3.15 kB
TypeScript
import { RanElement } from '../../utils';
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>;
_navResizeObserver?: ResizeObserver;
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;
/**
* The sliding indicator's `left`/`width`/`transform` are literal `px` values
* computed once in `setTabLine` from `getBoundingClientRect()` — they don't
* recompute on their own when the nav reflows (window resize, a sidebar
* collapsing, label text wrapping differently, fonts loading). A
* `ResizeObserver` on `_nav` catches all of those, not just a window
* `resize` event, mirroring `r-select`/`r-popover`'s reposition-on-resize
* for their portaled panels (see CLAUDE.md's floating-overlay-drift pitfall
* — this is the same class of bug for an in-flow indicator).
*/
_onNavResize: () => void;
_attachNavResizeObserver: () => 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;