import { DotFill } from '../../../Types/DotFill'; import type { Size } from '../../../Types/Size'; import { CustomElement } from '../../Abstracts/CustomElement'; import { IDotElementProps } from './IDotElementProps'; declare const DotElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Sizeable").ISizeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Dot - A small point or marker often used to indicate status or position. * * @description * The Dot component is a versatile status indicator that supports different fill states * (empty, half, full) to represent various states or progress levels. * * @element mosaik-dot * @category Primitives * * @csspart container - The main dot container element * @csspart fill - The inner fill element that shows the fill state * * @cssprop {Color} --dot-background-color - Background color of the dot * @cssprop {Color} --dot-foreground-color - Foreground/border color of the dot * @cssprop {String} --dot-size - Size of the dot * @cssprop {String} --dot-border-width - Border width for empty and half fill states * * @example * Basic dot status indicator: * ```html * * ``` * * @example * Different fill states: * ```html * * * * ``` * * @public */ export declare class DotElement extends DotElement_base implements IDotElementProps { private readonly _inheritance; private _fill; /** * @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 `size` property. * When used inside a DotGroup, inherits the group's size unless explicitly set. * * @public * @override */ get size(): Size; set size(value: Size); /** * Gets or sets the fill state of the dot. * The default value is `full`, which means the dot is completely filled. * * Possible values are: * * `full` (default) - completely filled * * `half` - filled from left to right (50%) * * `empty` - only border, no fill * * @public * @attr */ get fill(): DotFill; set fill(value: DotFill); } /** * @public */ export declare namespace DotElement { type Props = IDotElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-dot': DotElement; } } export {}; //# sourceMappingURL=DotElement.d.ts.map