import { ResizeController } from '@lit-labs/observers/resize-controller.js'; import { CSSResultArray, PropertyValueMap, PropertyValues, TemplateResult } from 'lit'; import { Focusable } from '../../utils/focusable.js'; import { RovingTabindexController } from '../../utils/reactive-controllers/roving-tabindex.js'; import { ScaledIndicator } from '../../utils/scaled-indicator.js'; import { LuzmoTab } from './tab'; export { ScaledIndicator }; /** * Given that the scroll needs to be on the right side of the viewport. * Returns the coordonate x it needs to scroll so that the tab with given index is visible. */ export declare function calculateScrollTargetForRightSide(index: number, direction: 'rtl' | 'ltr', tabs: LuzmoTab[], container: HTMLDivElement): number; /** * Given that the scroll needs to be on the left side of the viewport. * Returns the coordonate x it needs to scroll so that the tab with given index is visible. */ export declare function calculateScrollTargetForLeftSide(index: number, direction: 'rtl' | 'ltr', tabs: LuzmoTab[], container: HTMLDivElement): number; declare const LuzmoTabs_base: typeof Focusable & { new (...args: any[]): import("../../index.js").SizedElementInterface; prototype: import("../../index.js").SizedElementInterface; }; /** * @element luzmo-tabs * * @slot - Tab elements to manage as a group * @slot tab-panel - Tab Panel elements related to the listed Tab elements * @csspart tablist - Container element for the slotted luzmo-tab elements * * @fires change - The selected Tab child has changed. */ export declare class LuzmoTabs extends LuzmoTabs_base { static get styles(): CSSResultArray; /** * Whether to activate a tab on keyboard focus or not. * * By default a tab is activated via a "click" interaction. This is specifically intended for when * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc. * To learn more about "Deciding When to Make Selection Automatically Follow Focus", visit: * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus */ auto: boolean; /** * The tab items are displayed closer together. */ compact: boolean; dir: 'ltr' | 'rtl'; direction: 'vertical' | 'vertical-right' | 'horizontal'; emphasized: boolean; label: string; enableTabsScroll: boolean; /** * The tab list is displayed without a border. */ quiet: boolean; selectionIndicatorStyle: string; shouldAnimate: boolean; private slotEl; private tabList; selected: string; private set tabs(value); private get tabs(); private _tabs; constructor(); protected resizeController: ResizeController; /** * @internal */ rovingTabindexController: RovingTabindexController; /** * @internal */ get focusElement(): LuzmoTab | this; private limitDeltaToInterval; /** * Scrolls through the tabs component, on the X-axis, by a given ammount of pixels/ delta. The given delta is limited to the scrollable area of the tabs component. * @param delta - The ammount of pixels to scroll by. If the value is positive, the tabs will scroll to the right. If the value is negative, the tabs will scroll to the left. * @param behavior - The scroll behavior to use. Defaults to 'smooth'. */ scrollTabs(delta: number, behavior?: ScrollBehavior): void; get scrollState(): Record; getUpdateComplete(): Promise; private getNecessaryAutoScroll; scrollToSelection(): Promise; protected updated(changedProperties: PropertyValueMap): void; protected managePanels({ target }: Event & { target: HTMLSlotElement; }): void; protected render(): TemplateResult; protected willUpdate(changes: PropertyValues): void; private onTabsScroll; private onClick; private onKeyDown; private selectTarget; private onSlotChange; private updateCheckedState; private updateSelectionIndicator; connectedCallback(): void; disconnectedCallback(): void; }