var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
/**
 * A badge component for highlighting important information.
 *
 * Badges help highlight notifications, status, or new messages.
 * Primarily used for communicating secondary or additional information.
 *
 * @element btu-badge
 *
 * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
 *
 * @cssprop --badge-color-foreground - Text color (overrides theme color)
 * @cssprop --badge-color-background - Background color (overrides theme color)
 * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
 * @cssprop --badge-px - Horizontal padding (overrides size default)
 * @cssprop --badge-py - Vertical padding (overrides size default)
 * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
 *
 * @slot - Label text or child elements (e.g., btu-icon + text)
 *
 * @example
 * ```html
 * <!-- Badge with dot -->
 * <btu-badge variant="info" size="sm" dot>New</btu-badge>
 *
 * <!-- Badge with icon -->
 * <btu-badge variant="success" size="md">
 *   <btu-icon symbol="check"></btu-icon>
 *   Success
 * </btu-badge>
 * ```
 */
export default class Badge extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Style of the badge.
         * - 'info': Informational (default)
         * - 'primary': Primary action or emphasis
         * - 'error': Error or danger state
         * - 'success': Success or completion state
         * - 'warning': Warning or caution state
         * @attr
         */
        this.variant = 'info';
        /**
         * Should a dot be displayed before the label?
         * @attr
         */
        this.dot = false;
        /**
         * Size variant.
         * - 'sm': Small (default)
         * - 'md': Medium
         * - 'lg': Large
         * @attr
         */
        this.size = 'sm';
        /** @internal */
        this.initialClasses = [];
    }
    connectedCallback() {
        super.connectedCallback();
        // Capture initial classes from backend HTML
        if (this.className) {
            this.initialClasses = this.className.split(' ').filter(c => c.trim());
        }
    }
    createRenderRoot() {
        return this;
    }
    willUpdate() {
        // Map variant to theme color (info → gray)
        const colorMap = {
            info: 'gray',
            primary: 'primary',
            error: 'error',
            success: 'success',
            warning: 'warning',
        };
        const classes = [
            ...this.initialClasses,
            'btu-badge',
            `btu-badge-${this.size}`,
            `btu-badge-${colorMap[this.variant]}`,
            this.dot ? 'btu-badge-dot' : '',
        ];
        this.className = classes.filter(Boolean).join(' ');
    }
    firstUpdated() {
        this.emit('btu-badge-ready');
    }
    render() {
        return html ``;
    }
}
__decorate([
    property({ type: String })
], Badge.prototype, "variant", void 0);
__decorate([
    property({ type: Boolean })
], Badge.prototype, "dot", void 0);
__decorate([
    property({ type: String })
], Badge.prototype, "size", void 0);
// Register custom element with guard to prevent double registration
// (common with yarn link, HMR, or webpack bundle duplication)
if (!customElements.get('btu-badge')) {
    customElements.define('btu-badge', Badge);
}
//# sourceMappingURL=Badge.js.map