import type { LocaleProp } from '../../utils/locale'; import type { BadgeSize, BadgeType, BadgeVariant } from './mud-badge.types'; /** * Badge — small, non-interactive status / count indicator. * * Two visual forms: * - `numbered` (default): shows a numeric counter inside a rounded pill. * - `dot`: a presence circle for "unread" indication. `xs`/`sm` are solid; * `md`/`lg`/`xl` carry a small centered inner pip (per Figma 551:18330). * * Five color variants map to the project's semantic token roles. * Designed to overlay parent elements (avatars, icon buttons, list items) * via consumer-controlled positioning — the badge itself just paints. * Position offsets are exposed as CSS variables (`--badge-offset-top`, * `--badge-offset-right`) so consumers can compose without overrides. * * Pattern B (atom-visual): internal DOM only, no slots, no events. * * @element mud-badge */ export declare class MudBadge { /** * Visual form — `numbered` shows the count, `dot` is a presence indicator. * @default 'numbered' */ type: BadgeType; /** * Semantic color variant. * @default 'danger' */ variant: BadgeVariant; /** * Size rung — five-step scale matching Figma masters `551:17421`: * - `xs` (8 px) — dot-only presence pip (e.g. dropdown row indicator) * - `sm` (12 px) — compact dot or numbered * - `md` (16 px) — default numbered/dot (Figma Caption Medium 12/16) * - `lg` (20 px) — emphasised numbered (Figma Caption Medium 12/16) * - `xl` (24 px) — large numbered (Figma Body/Small Medium 14/20) * @default 'md' */ size: BadgeSize; /** * Renders the disabled design, replacing the `variant` colors. Visual only — * `aria-disabled` is not supported on `role="status"`, so the disabled state * is announced by the container that owns the badge. * @default false */ disabled: boolean; /** * Numeric count to display when `type='numbered'`. Ignored for `dot`. * Values greater than `max` render as `"{max}+"`. */ count?: number; /** * Upper bound for the visible count. Counts above this render as `"{max}+"`. * @default 99 */ max: number; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Accessible-name fallback when no count and no consumer `aria-label` are set. Overrides * the `locale`'s copy when set to a non-empty string. * @default 'Notificare' (ro-MD) */ notificationLabel?: string; host: HTMLMudBadgeElement; /** * Names the host: keeps the consumer's native `aria-label` attribute when * set, otherwise applies the computed fallback (the visible count, or * the locale's `notificationLabel`). See `nameHostWithFallback`. */ private hostLabel?; private stopLang?; connectedCallback(): void; disconnectedCallback(): void; componentWillRender(): void; /** Built-in strings in the resolved locale, with the override props on top. */ private messages; private get isDot(); private fallbackLabel; private formatCount; render(): any; }