import { ISelectable, ISelectableEvents } from '../../../Behaviors/Selectable'; import { TabStripPlacement } from '../../../Types/TabStripPlacement'; import { CustomElement } from '../../Abstracts/CustomElement'; import { ITabStripItemElementProps } from './ITabStripItemElementProps'; import { TabStripElement } from './TabStripElement'; declare const TabStripItemElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Rippleable").IRippleableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Iconable").IIconableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Focusable").IFocusableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Selectable").ISelectableProps & ISelectableEvents & ISelectable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Tab Strip Item - An individual tab navigation button within a tab strip. * * @description * The Tab Strip Item component represents a single clickable tab button within a tab strip navigation. * It displays a label, an optional icon, and supports selection states with visual feedback including * ripple effects and focus indicators. The component inherits variant, orientation, and placement from * its parent tab strip and manages its selected state to control which content panel is visible. Tab * strip items support keyboard navigation and provide appropriate ARIA attributes for accessibility. * * @name Tab Strip Item * @element mosaik-tab-strip-item * @category Selectors * * @slot icon - The icon displayed alongside the label * @slot label - The text label for the tab * * @csspart content - The main content wrapper * @csspart focusRing - The focus indicator ring for keyboard navigation * @csspart icon - The icon display area * @csspart innerStack - The inner layout stack for icon and label * @csspart label - The text label display area * @csspart ripple - The ripple part. * @csspart root - The root container element * * @cssprop {String} --tab-strip-item-background-color - The background fill color * @cssprop {String} --tab-strip-item-border-color - The border color * @cssprop {String} --tab-strip-item-border-radius - The corner rounding radius * @cssprop {String} --tab-strip-item-border-style - The border line style * @cssprop {String} --tab-strip-item-border-width - The border thickness * @cssprop {String} --tab-strip-item-focus-ring-active-width - The strip item focus ring active width CSS custom property. * @cssprop {String} --tab-strip-item-focus-ring-color - The strip item focus ring color CSS custom property. * @cssprop {String} --tab-strip-item-focus-ring-inward-offset - The strip item focus ring inward offset CSS custom property. * @cssprop {String} --tab-strip-item-focus-ring-outward-offset - The strip item focus ring outward offset CSS custom property. * @cssprop {String} --tab-strip-item-font-family - The font family for tab strip item text * @cssprop {String} --tab-strip-item-font-letter-spacing - The letter spacing for tab strip item text * @cssprop {String} --tab-strip-item-font-line-height - The line height for tab strip item text * @cssprop {String} --tab-strip-item-font-size - The font size for tab strip item text * @cssprop {String} --tab-strip-item-font-text-decoration - The text decoration style * @cssprop {String} --tab-strip-item-font-text-transform - The text transformation style * @cssprop {String} --tab-strip-item-font-weight - The font weight for tab strip item text * @cssprop {String} --tab-strip-item-foreground-color - The text and icon color * @cssprop {String} --tab-strip-item-gap - The spacing between icon and label * @cssprop {String} --tab-strip-item-padding-bottom - The bottom padding inside the tab strip item * @cssprop {String} --tab-strip-item-padding-left - The left padding inside the tab strip item * @cssprop {String} --tab-strip-item-padding-right - The right padding inside the tab strip item * @cssprop {String} --tab-strip-item-padding-top - The top padding inside the tab strip item * @cssprop {Color} --tab-strip-item-ripple-color - The strip item ripple color CSS custom property. * @cssprop {String} --tab-strip-item-ripple-duration - The strip item ripple duration CSS custom property. * @cssprop {String} --tab-strip-item-shadow - The drop shadow or elevation effect * @cssprop {String} --tab-strip-item-shadow-blur - The strip item shadow blur CSS custom property. * @cssprop {String} --tab-strip-item-shadow-color - The strip item shadow color CSS custom property. * @cssprop {String} --tab-strip-item-shadow-offset-x - The strip item shadow offset x CSS custom property. * @cssprop {String} --tab-strip-item-shadow-offset-y - The strip item shadow offset y CSS custom property. * @cssprop {String} --tab-strip-item-shadow-spread - The strip item shadow spread CSS custom property. * @cssprop {String} --tab-strip-item-size - The minimum size of the tab strip item * @cssprop {String} --tab-strip-item-thickness - The thickness of selection indicators * @cssprop {String} --tab-strip-item-transition-duration - The duration of hover/focus transitions * @cssprop {String} --tab-strip-item-transition-mode - The timing function for transitions * @cssprop {String} --tab-strip-item-transition-property - The CSS properties to transition * @cssprop {String} --tab-strip-item-translate - The strip item translate CSS custom property. * * @fires selected {SelectedEvent} - Fired when the tab strip item is selected * @fires deselected {DeselectedEvent} - Fired when the tab strip item is deselected * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @dependency mosaik-focus-ring - The Focus Ring element. * @dependency mosaik-icon - The Icon element. * @dependency mosaik-ripple - The Ripple element. * @dependency mosaik-stack - The Stack element. * @dependency mosaik-text - The Text element. * * @example * Basic tab strip item with slotted text: * ```html * Overview * ``` * * @example * Tab strip item with icon-position: * ```html * Settings * ``` * * @example * Selected tab strip item: * ```html * Active * ``` * * @example * Tab strip item with badge overlay: * ```html * * Messages * * * ``` * * @public */ export declare class TabStripItemElement extends TabStripItemElement_base implements ITabStripItemElementProps, ISelectableEvents, ISelectable, ISelectableEvents { private readonly _inheritance; private readonly _keyboardController; private _placement; /** * @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; private set placement(value); /** * Gets the `parent` tab strip of this item. * * @protected * @readonly */ get parent(): TabStripElement; /** * @public * @override */ connectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; } /** * @public */ export declare namespace TabStripItemElement { type Props = ITabStripItemElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tab-strip-item': TabStripItemElement; } } export {}; //# sourceMappingURL=TabStripItemElement.d.ts.map