import { BadgePosition } from '../../../Types/BadgePosition'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IBadgeElementProps } from './IBadgeElementProps'; declare const BadgeElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Sizeable").ISizeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Badge - A compact visual indicator for displaying status, counts, labels, or notifications. * * @description * The Badge component provides a versatile way to display small status indicators, notification * counts, labels, or quick status information. It can be positioned relative to parent elements, * displayed as standalone indicators, or used as overlay badges. The component supports text * content, icon display, dot indicators, and various visual styles to convey different types * of information effectively. * * @name Badge * @element mosaik-badge * @category Media * * @csspart badge - The main badge container element providing the visual foundation * @csspart content - The inner content container for text, icons, or dot indicators * * @cssprop {Color} --badge-background-color - The background color of the badge * @cssprop {Color} --badge-foreground-color - The text and icon color within the badge * @cssprop {String} --badge-border-radius - The border radius controlling badge shape * @cssprop {String} --badge-padding - The internal padding around badge content * @cssprop {String} --badge-min-width - The minimum width ensuring proper circular badges * @cssprop {String} --badge-font-size - The font size for badge text content * @cssprop {String} --badge-font-weight - The font weight for badge text display * * @dependency {TextElement} - Text component for rendering badge labels and content * @dependency {IconElement} - Icon component for displaying badge icons and symbols * * @example * Notification count badge positioned over a button (set the badge label via the `label` JavaScript property): * ```html *
* * *
* ``` * * @example * Standalone dot indicator badge: * ```html * * ``` * * @public */ export declare class BadgeElement extends BadgeElement_base implements IBadgeElementProps { private _icon; private _overlap; private _attached; private _position; /** * @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 `icon` property. * * @public */ get icon(): string; set icon(value: string); /** * Gets or sets the `overlap` property. * * @public * @attr */ get overlap(): boolean; set overlap(value: boolean); /** * Gets or sets the `attached` property. * * @public * @attr */ get attached(): boolean; set attached(value: boolean); /** * Gets or sets the `position` property. * * @public * @attr */ get position(): BadgePosition; set position(value: BadgePosition); } /** * @public */ export declare namespace BadgeElement { type Props = IBadgeElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-badge': BadgeElement; } } export {}; //# sourceMappingURL=BadgeElement.d.ts.map