import { ISlottable } from '../../../Behaviors/Slottable'; import { Orientation } from '../../../Types/Orientation'; import { TabStripPlacement } from '../../../Types/TabStripPlacement'; import { CustomElement } from '../../Abstracts/CustomElement'; import { ITabStripElementProps } from './ITabStripElementProps'; import { TabStripItemElement } from './TabStripItemElement'; declare const TabStripElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * TabStrip - A navigation container for organizing and switching between related content panels. * * Provides tab-based navigation with keyboard support, visual indicators, and flexible placement options. * Manages tab selection states and coordinates with tab panel content. Essential for organizing * complex interfaces with multiple related views or data sets. * * @name TabStripElement * @element mosaik-tab-strip * @category Selectors * * @slot - The default slot. * @slot end - The end slot. * @slot start - The start slot. * * @csspart tab-strip - The main tab strip container * @csspart indicator - Active tab indicator element * * @cssprop {Color} --tab-strip-background-color - Background color of the tab strip * @cssprop {Color} --tab-strip-border-color - Border color for tab strip edges * @cssprop {String} --tab-strip-border-radius - The strip border radius CSS custom property. * @cssprop {String} --tab-strip-border-style - The strip border style CSS custom property. * @cssprop {String} --tab-strip-border-width - The strip border width CSS custom property. * @cssprop {String} --tab-strip-font-family - The strip font family CSS custom property. * @cssprop {String} --tab-strip-font-letter-spacing - The strip font letter spacing CSS custom property. * @cssprop {String} --tab-strip-font-line-height - The strip font line height CSS custom property. * @cssprop {String} --tab-strip-font-size - The strip font size CSS custom property. * @cssprop {String} --tab-strip-font-text-decoration - The strip font text decoration CSS custom property. * @cssprop {String} --tab-strip-font-text-transform - The strip font text transform CSS custom property. * @cssprop {String} --tab-strip-font-weight - The strip font weight CSS custom property. * @cssprop {String} --tab-strip-foreground-color - The strip foreground color CSS custom property. * @cssprop {String} --tab-strip-gap - Spacing between individual tabs * @cssprop {String} --tab-strip-padding-bottom - The strip padding bottom CSS custom property. * @cssprop {String} --tab-strip-padding-left - The strip padding left CSS custom property. * @cssprop {String} --tab-strip-padding-right - The strip padding right CSS custom property. * @cssprop {String} --tab-strip-padding-top - The strip padding top CSS custom property. * @cssprop {String} --tab-strip-shadow - The strip shadow CSS custom property. * @cssprop {String} --tab-strip-shadow-blur - The strip shadow blur CSS custom property. * @cssprop {String} --tab-strip-shadow-color - The strip shadow color CSS custom property. * @cssprop {String} --tab-strip-shadow-offset-x - The strip shadow offset x CSS custom property. * @cssprop {String} --tab-strip-shadow-offset-y - The strip shadow offset y CSS custom property. * @cssprop {String} --tab-strip-shadow-spread - The strip shadow spread CSS custom property. * @cssprop {String} --tab-strip-transition-duration - The strip transition duration CSS custom property. * @cssprop {String} --tab-strip-transition-mode - The strip transition mode CSS custom property. * @cssprop {String} --tab-strip-transition-property - The strip transition property CSS custom property. * @cssprop {String} --tab-strip-translate - The strip translate CSS custom property. * * @dependency mosaik-ink-bar - The Ink Bar element. * * @example * Basic horizontal tab strip: * ```html * * Overview * Details * Settings * * ``` * * @example * Tab strip with indicator and disabled item: * ```html * * Dashboard * Analytics * Admin * * ``` * * @example * Vertical tab strip: * ```html * * Home * Profile * Settings * * ``` * * @public */ export declare class TabStripElement extends TabStripElement_base implements ITabStripElementProps, ISlottable { private readonly _provider; private readonly _resizeController; private readonly _keyboardController; private _indicatorElement; private _placement; private _hasIndicator; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `placement` property. * * @public * @attr */ get placement(): TabStripPlacement; set placement(value: TabStripPlacement); /** * Gets or sets the `hasIndicator` property. * * @public * @attr */ get hasIndicator(): boolean; set hasIndicator(value: boolean); /** * Returns the items of the tab strip. * * @public * @readonly */ get items(): Array; /** * Returns the selected tab item. * * @public * @readonly */ get selectedItem(): TabStripItemElement | null; /** * Returns the selected index. * * @public * @readonly */ get selectedIndex(): number; /** * Selects the specified tab item. * * @public * @param tabStripItem - The tab item to select. */ select(tabStripItem: TabStripItemElement): void; /** * Selects the specified tab item by its index. * * @public * @param index - The index of the tab item to select. */ selectByIndex(index: number): void; /** * Selects the specified tab item by its value. * * @public * @param value - The value of the tab item to select. */ selectByValue(value: unknown): void; /** * @public * @override */ onSlotChanges(slotName?: string): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onClick(event: Event): void; /** * Stretches the ink bar toward the pressed tab item (anticipation effect). * On pointer release, the bar either slides to the new selection (if * click fires) or snaps back to the current tab. * * @protected */ protected onPointerDown(event: PointerEvent): void; /** * @protected */ protected onTabStripItemSelectionChanged(event: CustomEvent): void; /** * @protected */ protected onDisabledPropertyChange(): void; /** * @protected */ protected onVariantPropertyChange(): void; /** * @protected */ protected onDirPropertyChange(): void; /** * @protected */ protected onOrientationPropertyChanged(_prev?: Orientation, next?: Orientation): void; /** * @protected */ protected onHasIndicatorPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @private */ private alignIndicatorTo; /** * @private */ private getCurrent; } /** * @public */ export declare namespace TabStripElement { type Props = ITabStripElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tab-strip': TabStripElement; } } export {}; //# sourceMappingURL=TabStripElement.d.ts.map