import { PropertyValueMap } from 'lit'; import { DdsElement } from '../../internal/dds-hu-element'; declare const BadgeBaseWithSized: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; export type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'; export type BadgeSize = 'sm' | 'lg'; /** * `dap-ds-badge` * @summary A badge is a small status descriptor for UI elements. * @element dap-ds-badge * @title - Badge * * @property { 'sm' | 'lg' } size - The size of the badge. Default is `sm`. * @property {string} sizeMap - Responsive size map (e.g. "md:lg"). * * @slot - The content of the badge. * @slot icon - The icon of the badge. * * @csspart base - The main container of the badge. * @csspart icon - The icon of the badge. * @csspart content - The content of the badge. * @csspart icon-base - The base of the icon. * * @cssproperty --dds-badge-border-width - The width of the badge's border (default: var(--dds-border-width-base)) * @cssproperty --dds-badge-border-style - The style of the badge's border (default: solid) * @cssproperty --dds-badge-border-radius - The border radius of the badge (default: var(--dds-radius-base)) * @cssproperty --dds-badge-font-weight - The font weight of the badge text (default: var(--dds-font-weight-bold)) * @cssproperty --dds-badge-line-height - The line height of the badge text (default: 1.2) * @cssproperty --dds-badge-transition - The transition property for the badge (default: all 0.2s ease-in-out) * * @cssproperty --dds-badge-padding-sm - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) * @cssproperty --dds-badge-padding-lg - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) * @cssproperty --dds-badge-font-size-sm - The font size of the small badge (default: var(--dds-font-xs)) * @cssproperty --dds-badge-font-size-lg - The font size of the large badge (default: var(--dds-font-sm)) * * @cssproperty --dds-badge-neutral-border-color - The border color of the neutral badge (default: var(--dds-border-neutral-base)) * @cssproperty --dds-badge-neutral-background - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) * @cssproperty --dds-badge-neutral-color - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) * * @cssproperty --dds-badge-brand-border-color - The border color of the brand badge (default: var(--dds-border-brand-base)) * @cssproperty --dds-badge-brand-background - The background color of the brand badge (default: var(--dds-background-brand-medium)) * @cssproperty --dds-badge-brand-color - The text color of the brand badge (default: var(--dds-text-brand-subtle)) * * @cssproperty --dds-badge-info-border-color - The border color of the info badge (default: var(--dds-border-informative-base)) * @cssproperty --dds-badge-info-background - The background color of the info badge (default: var(--dds-background-informative-medium)) * @cssproperty --dds-badge-info-color - The text color of the info badge (default: var(--dds-text-informative-subtle)) * * @cssproperty --dds-badge-positive-border-color - The border color of the positive badge (default: var(--dds-border-positive-base)) * @cssproperty --dds-badge-positive-background - The background color of the positive badge (default: var(--dds-background-positive-medium)) * @cssproperty --dds-badge-positive-color - The text color of the positive badge (default: var(--dds-text-positive-subtle)) * * @cssproperty --dds-badge-warning-border-color - The border color of the warning badge (default: var(--dds-border-warning-subtle)) * @cssproperty --dds-badge-warning-background - The background color of the warning badge (default: var(--dds-background-warning-medium)) * @cssproperty --dds-badge-warning-color - The text color of the warning badge (default: var(--dds-text-warning-subtle)) * * @cssproperty --dds-badge-negative-border-color - The border color of the negative badge (default: var(--dds-border-negative-base)) * @cssproperty --dds-badge-negative-background - The background color of the negative badge (default: var(--dds-background-negative-medium)) * @cssproperty --dds-badge-negative-color - The text color of the negative badge (default: var(--dds-text-negative-subtle)) * */ export default class DapDSBadge extends BadgeBaseWithSized { /** The type of the badge * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' } */ type: BadgeType; /** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */ private get badgeSize(); /** The icon of the badge, this is a name of a built in icon */ icon?: string; /** Whether the badge represents dynamic content that should announce changes */ live: boolean; private _hasSlottedIcon; private _cachedIconSize; static readonly styles: import('lit').CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; private setAccessibilityAttributes; private validateIcon; private setupSlotListeners; private updateIconSlot; private getIconSize; private renderIcon; render(): import('lit-html').TemplateResult; } export {};