import { ISlottable } from '../../../Behaviors/Slottable'; import { TabPanelAlignment } from '../../../Types/TabPanelAlignment'; import { TabStripPlacement } from '../../../Types/TabStripPlacement'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ITabElementProps } from './ITabElementProps'; import { TabItemElement } from './TabItemElement'; declare const TabElement_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; /** * Tab - A navigation component for switching between different content panels within the same context. * * @description * The Tab component provides a tabbed interface for organizing and switching between multiple content * panels. It displays tab strip items as navigation headers and manages the visibility of associated * content panels. Tabs support multiple placements (top, bottom, left, right), customizable alignment, * visual indicators, and optional swipe gestures. The component is ideal for organizing related content * into separate views without navigating to different pages, commonly used in settings panels, product * details, dashboards, and multi-section forms. * * @name Tab * @element mosaik-tab * @category Selectors * * @slot - The default slot for tab items (mosaik-tab-item elements) * @slot start - Content displayed before the tab strip (e.g., toolbar buttons) * @slot end - Content displayed after the tab strip (e.g., action buttons) * * @csspart root - The root container element * @csspart header - The header container with tab strip * @csspart tabPanel - The tab panel wrapper element * @csspart tabStrip - The tab strip container * @csspart tabStripItem - Individual tab strip item elements * @csspart content - The main content area for active tab panel * * @cssprop {String} --tab-font-family - The font family for tab text * @cssprop {String} --tab-font-size - The font size for tab text * @cssprop {String} --tab-font-line-height - The line height for tab text * @cssprop {String} --tab-font-weight - The font weight for tab text * @cssprop {String} --tab-font-letter-spacing - The letter spacing for tab text * @cssprop {String} --tab-font-text-decoration - The text decoration style * @cssprop {String} --tab-font-text-transform - The text transformation style * @cssprop {String} --tab-padding-top - The top padding inside the tab container * @cssprop {String} --tab-padding-right - The right padding inside the tab container * @cssprop {String} --tab-padding-bottom - The bottom padding inside the tab container * @cssprop {String} --tab-padding-left - The left padding inside the tab container * @cssprop {String} --tab-gap - The spacing between elements * @cssprop {String} --tab-foreground-color - The text and icon color * @cssprop {String} --tab-background-color - The background fill color * @cssprop {String} --tab-border-color - The border color * @cssprop {String} --tab-border-width - The border thickness * @cssprop {String} --tab-border-radius - The corner rounding radius * @cssprop {String} --tab-border-style - The border line style * @cssprop {String} --tab-indicator-height - The height of the selection indicator * @cssprop {String} --tab-divider-height - The height of divider lines * @cssprop {String} --tab-panel-background-color - The background color of the panel * @cssprop {String} --tab-strip-background-color - The background color of the strip * @cssprop {String} --tab-strip-padding-top - The top padding inside the strip * @cssprop {String} --tab-strip-padding-right - The right padding inside the strip * @cssprop {String} --tab-strip-padding-bottom - The bottom padding inside the strip * @cssprop {String} --tab-strip-padding-left - The left padding inside the strip * @cssprop {String} --tab-transition-duration - The duration of transitions * @cssprop {String} --tab-transition-mode - The timing function for transitions * @cssprop {String} --tab-transition-property - The CSS properties to transition * * @dependency {InkBarElement} - Animated indicator bar for the selected tab * @dependency {TextElement} - Text rendering component * @dependency {TabPanelElement} - Container for tab strip and scrolling controls * @dependency {TabStripElement} - Container for tab strip items * @dependency {TabStripItemElement} - Individual tab navigation items * * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @example * Basic tabs with three panels: * ```html * * *

Overview content goes here.

* * *

Details content goes here.

* * *

Settings content goes here.

* * * ``` * * @example * Tabs with bottom placement and primary variant: * ```html * * *

Home content

* * *

Search content

* * *

Profile content

* * * ``` * * @example * Tabs with center alignment and gestures: * ```html * * Content 1 * Content 2 * Content 3 * * ``` * * @public */ export declare class TabElement extends TabElement_base implements ITabElementProps, ISlottable { private readonly _provider; private _alignment; private _placement; private _hasIndicator; private _enableGestures; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `alignment` property. * * @public * @attr */ get alignment(): TabPanelAlignment; set alignment(value: TabPanelAlignment); /** * 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); /** * Gets or sets the `enableGestures` property. * * @public * @attr */ get enableGestures(): boolean; set enableGestures(value: boolean); /** * Returns the items of the tab. * * @public * @readonly */ get items(): Array; /** * Returns the selected tab item. * * @public * @readonly */ get selectedItem(): TabItemElement | null; /** * Returns the selected index. * * @public * @readonly */ get selectedIndex(): number; /** * Selects the specified tab item. * * @public * @param tabItem - The tab item to select. */ select(tabItem: TabItemElement): 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; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onTabItemSelectionChanged(event: CustomEvent): void; } /** * @public */ export declare namespace TabElement { type Props = ITabElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tab': TabElement; } } export {}; //# sourceMappingURL=TabElement.d.ts.map