import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement,type LyraEventMap}from'../../../internal/lyra-element.js';import{type LyraAppearance,type LyraSize,type LyraSizeStep,type LyraVariant}from'../../../internal/variants.js'; /** The library's semantic-tone vocabulary plus Shoelace's spelling for the brand tone. */ export type BadgeVariant=LyraVariant|'primary'; /** The library's one size ladder, including both upstream long-form spellings. */ export type BadgeSize=LyraSize; /** Visual treatment of a labelled surface: how much of the variant palette is spent on fill, * border, and text. The library's one `appearance` vocabulary. */ export type BadgeAppearance=LyraAppearance; /** Opt-in attention-seeking animation. Every value other than `none` stops outright under * `prefers-reduced-motion: reduce`. */ export type BadgeAttention='none'|'pulse'|'bounce'; /** * `` — a compact status label. * * Two independent visual axes: `variant` picks the semantic palette (neutral through danger, read * from the library's shared semantic grid), and `appearance` decides how much of that palette * lands on the fill, the border, and the text. `variant="neutral"` deliberately opts out of the * grid's own neutral row and keeps the ambient surface/border/text treatment, so a badge with no * status to signal reads as plain rather than grey-tinted. * `pill` switches the rounded rectangle for fully-rounded ends, and `attention` adds an opt-in, * reduced-motion-aware animation for a badge that has to be noticed. * Badge content is static by default, matching both mirrored upstreams. Authors whose badge holds * genuinely changing status text can opt into live-region semantics with `role="status"`; any * authored role is preserved. `` inherits the same visual and author-owned semantic * contract. * * @customElement lr-badge * @slot - Badge content. * @slot start - Content placed before the label, typically an icon. The wrapper collapses * entirely (no stray gap) while empty. Mark purely decorative content `aria-hidden`. * @slot end - Content placed after the label, typically an icon. The wrapper collapses entirely * (no stray gap) while empty. Mark purely decorative content `aria-hidden`. * @csspart base - Compatibility name for the badge surface; use `badge`. * @csspart badge - The badge surface. It is the same node as `base`. * @csspart start - Wrapper around the `start` slot. Hidden entirely while empty. * @csspart content - Wrapper around the default slot; the part that truncates with an ellipsis. * @csspart end - Wrapper around the `end` slot. Hidden entirely while empty. * @cssprop [--lr-badge-background=var(--lr-badge-fill)] - Explicit override for the badge's * background, winning over whatever `variant` and `appearance` resolved. Left unset (the default) * so it still inherits from a consumer's own ancestor rule. * @cssprop [--lr-badge-border=var(--lr-badge-stroke)] - Explicit override for the badge's border * color, on the same terms as `--lr-badge-background`. * @cssprop [--lr-badge-color=var(--lr-badge-text)] - Explicit override for the badge's text color, * on the same terms as `--lr-badge-background`. * @cssprop [--lr-badge-tint=var(--lr-color-surface)] - Palette slot: the variant's quiet fill. * Its private default follows each non-neutral `variant`'s quiet fill from the shared semantic * grid; an inherited or direct public value remains authoritative. * @cssprop [--lr-badge-solid=var(--lr-color-fill-loud)] - Palette slot: the variant's loud fill, * used by `appearance="accent"`. * @cssprop [--lr-badge-edge=var(--lr-color-border)] - Palette slot: the variant's border color. * Its private default follows each non-neutral `variant`'s loud fill; an inherited or direct * public value remains authoritative. * @cssprop [--lr-badge-ink=var(--lr-color-text)] - Palette slot: the variant's text color. Its * private default follows each non-neutral `variant`'s loud fill; an inherited or direct public * value remains authoritative. * @cssprop [--lr-badge-on-solid=var(--lr-color-on-loud)] - Palette slot: the text color that * stays legible on `--lr-badge-solid`. * @cssprop [--lr-badge-fill=var(--lr-badge-tint)] - Surface slot: which palette entry `appearance` * routed onto the background. Set it to retune a single appearance without touching the palette. * @cssprop [--lr-badge-stroke=var(--lr-badge-edge)] - Surface slot: which palette entry * `appearance` routed onto the border color. * @cssprop [--lr-badge-text=var(--lr-badge-ink)] - Surface slot: which palette entry `appearance` * routed onto the label color. * @cssprop [--lr-badge-font-size=var(--lr-font-size-sm)] - The badge's label font size. Each `size` * sets it to that step's font size. * @cssprop [--lr-badge-padding-inline=var(--lr-space-s)] - The badge's inline padding. Each `size` * sets it to that step's inline padding. * @cssprop [--lr-badge-min-height=var(--lr-size-1-25rem)] - The badge's minimum block size. Each * `size` sets it to that step's minimum block size. * @cssprop [--lr-badge-gap=var(--lr-space-2xs)] - Space between the `start` slot, the label, and * the `end` slot. * @cssprop [--lr-badge-radius=var(--lr-radius)] - Corner radius of the badge surface. `pill` * raises it to `var(--lr-radius-pill)`. Does not vary by `size` tier. * @cssprop [--lr-badge-attention-duration=var(--lr-duration-ambient)] - One cycle of the * `attention` animation. * @cssprop [--lr-badge-attention-easing=var(--lr-easing-emphasized)] - Timing function of the * `attention` animation. * @cssprop [--lr-badge-pulse-color=color-mix(in srgb, currentColor 40%, transparent)] - Color of * the expanding ring drawn by `attention="pulse"`. * @cssprop [--pulse-color=var(--lr-badge-pulse-color)] - Upstream-compatible pulse-ring color. * @cssprop [--lr-badge-pulse-spread=var(--lr-size-0-25rem)] - How far the `attention="pulse"` ring * expands. * @cssprop [--lr-badge-bounce-distance=var(--lr-size-0-1875rem)] - Peak travel of the * `attention="bounce"` hop. * @status stable * @since 4.0.0 */ export declare class LyraBadgeextends LyraElement{static styles:import("lit").CSSResultGroup[];static get observedAttributes():string[]; /** Semantic palette. Every valid upstream spelling remains observable verbatim; rendering uses * the private canonical value instead of rewriting the public property or reflected attribute. */ variant:Variant; /** Visual density, matching ``'s `3xs`–`xl` size scale. `m` preserves the original * badge dimensions. Valid `small`/`medium`/`large` values round-trip exactly. */ size:BadgeSize; /** How much of the `variant` palette is spent on fill, border, and text. The default * (`filled-outlined`: quiet tint, loud border, loud text) reproduces the badge's original * treatment. */ appearance:BadgeAppearance; /** Draws fully-rounded ends instead of the default rounded rectangle. */ pill:boolean; /** Opt-in attention-seeking animation. An explicit `'none'` suppresses the `pulse` shorthand. * Stops entirely under `prefers-reduced-motion: reduce`. */ attention:BadgeAttention; /** Upstream-compatible pulse shorthand. Equivalent to `attention="pulse"` only while the * `attention` attribute is omitted; every explicit attention value takes precedence. */ pulse:boolean;private hasStartSlot;private hasEndSlot; /** Badge semantics are author-owned by default; a purpose-specific subclass may opt in. */ protected get semanticRole():'status'|null;protected get effectiveVariant():LyraVariant;protected get effectiveSize():LyraSizeStep;attributeChangedCallback(name:string,oldValue:string|null,value:string|null):void;connectedCallback():void;protected willUpdate(changed:PropertyValues):void;private onStartSlotChange;private onEndSlotChange; /** Extension point for a subclass rendering its own trailing control inside `[part~='base']` -- * see ``'s remove button. Renders nothing here. */ protected renderTrailing():unknown;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-badge':LyraBadge;}}