import { ISlottable } from '../../../Behaviors/Slottable'; import { CustomElement } from '../../Abstracts/CustomElement'; import { ISegmentElementProps } from './ISegmentElementProps'; declare const SegmentElement_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; /** * Segment - A mutually exclusive button group for toggling between different views or options. * * @description * The Segment component (also known as a segmented control) displays a group of related buttons * arranged in a horizontal row where only one option can be selected at a time. It provides a * visual indicator that highlights the selected segment and supports keyboard navigation for * accessibility. Segments are ideal for switching between different views, filters, or modes * within the same context without navigating to a new page. The component automatically manages * selection state and includes an animated ink bar indicator to show the active segment. * * @name Segment * @element mosaik-segment * @category Selectors * * @slot - The default slot for segment items (mosaik-segment-item elements) * * @csspart indicator - The animated ink bar indicator element * * @cssprop {String} --segment-background-color - The background fill color of the segment container * @cssprop {String} --segment-border-color - The border color * @cssprop {String} --segment-border-width - The border thickness * @cssprop {String} --segment-border-radius - The corner rounding radius * @cssprop {String} --segment-border-style - The border line style * @cssprop {String} --segment-foreground-color - The text and icon color * @cssprop {String} --segment-gap - The spacing between segment items * @cssprop {String} --segment-padding-top - The top padding inside the segment container * @cssprop {String} --segment-padding-right - The right padding inside the segment container * @cssprop {String} --segment-padding-bottom - The bottom padding inside the segment container * @cssprop {String} --segment-padding-left - The left padding inside the segment container * @cssprop {String} --segment-indicator-height - The height of the selection indicator * * @dependency {InkBarElement} - Animated indicator bar for the selected segment * * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @example * Basic segment with three options: * ```html * * Day * Week * Month * * ``` * * @example * Primary variant segment: * ```html * * List * Grid * Table * * ``` * * @example * Disabled segment: * ```html * * Option 1 * Option 2 * * ``` * * @public */ export declare class SegmentElement extends SegmentElement_base implements ISegmentElementProps, ISlottable { private readonly _provider; private _indicatorElement; private readonly _resizeController; private readonly _keyboardController; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ onSlotChanges(slotName?: string): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onClick(event: Event): void; /** * @protected */ protected onChecked(event: CustomEvent): void; protected onResize(event: CustomEvent): void; /** * @protected */ protected onDisabledPropertyChange(): void; /** * @protected */ protected onVariantPropertyChange(): void; /** * @protected */ protected onDirPropertyChange(): void; /** * @private */ private alignIndicatorTo; /** * @private */ private getItems; /** * @private */ private getEnabledItems; /** * @private */ private getCurrent; /** * @private */ private getItem; } /** * @public */ export declare namespace SegmentElement { type Props = ISegmentElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-segment': SegmentElement; } } export {}; //# sourceMappingURL=SegmentElement.d.ts.map