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, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import '../badge/Badge.js';
import '../icon/Icon.js';
/**
 * An individual tab within a tab group.
 *
 * Renders a button with role="tab" that participates in keyboard navigation
 * and selection state managed by the parent `btu-tabs` container.
 *
 * @element btu-tab
 *
 * @fires {CustomEvent} btu-tab-ready - Fired after first render
 * @fires {CustomEvent<{name: string}>} btu-tab-change - Fired when a non-disabled tab with a name is clicked
 *
 * @cssprop --badge-color-background - Background color of the count indicator badge (default: gray-50)
 * @cssprop --badge-color-foreground - Text color of the count indicator badge (default: gray-700)
 *
 * @example
 * ```html
 * <btu-tabs>
 *   <btu-tab name="main" label="Main"></btu-tab>
 *   <btu-tab name="seo" label="SEO"></btu-tab>
 *   <btu-tab name="styles" label="Styles" disabled></btu-tab>
 * </btu-tabs>
 * ```
 */
export default class Tab extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Whether the tab is disabled and non-interactive.
         * @attr
         */
        this.disabled = false;
        /**
         * Placement of the icon relative to the label.
         * @attr icon-position
         */
        this.iconPosition = 'leading';
        /**
         * When true, hides the label visually while maintaining accessibility.
         * @attr icon-only
         */
        this.iconOnly = false;
        /**
         * When true, displays an error badge on the tab.
         * @attr
         */
        this.error = false;
        /** @internal Active state set by parent btu-tabs */
        this._active = false;
        /** @internal Roving tabindex value set by parent btu-tabs */
        this._tabindex = -1;
        /** @internal Set by parent btu-tabs */
        this.size = 'md';
        /** @internal */
        this.initialClasses = [];
    }
    static get tagName() {
        return 'BTU-TAB';
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.className) {
            this.initialClasses = this.className.split(' ').filter(c => c.trim());
        }
    }
    createRenderRoot() {
        return this;
    }
    willUpdate() {
        this.className = [...this.initialClasses, 'btu-tab'].filter(Boolean).join(' ');
    }
    firstUpdated() {
        this.emit('btu-tab-ready');
    }
    /** @internal */
    handleClick() {
        if (this.disabled || !this.name)
            return;
        this.emit('btu-tab-change', { name: this.name });
    }
    render() {
        const iconTemplate = this.symbol
            ? html `<btu-icon symbol="${this.symbol}" size="${this.size === 'lg' ? 'md' : 'sm'}"></btu-icon>`
            : nothing;
        const labelTemplate = this.iconOnly && this.symbol ? nothing : html `<span>${this.label}</span>`;
        const badgeTemplate = this.badge != null ? html `<btu-badge size="sm">${this.badge}</btu-badge>` : nothing;
        const errorDot = this.error ? html `<btu-badge size="sm" variant="error">!</btu-badge>` : nothing;
        const indicator = this._active && !this.disabled
            ? html `<span
            class="btu-tab-indicator"
            style=${styleMap(this.error ? { background: 'oklch(var(--btu-theme-error-600))' } : {})}
          ></span>`
            : nothing;
        return html `<button
      type="button"
      role="tab"
      class="btu-tab-button-${this.size} btu-tab-button"
      aria-selected="${this._active}"
      aria-disabled="${this.disabled || nothing}"
      aria-description="${this.description || nothing}"
      aria-label="${this.iconOnly && this.label ? this.label : nothing}"
      tabindex="${this._tabindex}"
      @click=${this.handleClick}
    >
      ${this.iconPosition === 'leading' ? iconTemplate : nothing} ${labelTemplate}
      ${this.iconPosition === 'trailing' ? iconTemplate : nothing} ${badgeTemplate} ${errorDot} ${indicator}
    </button>`;
    }
}
__decorate([
    property({ type: String, attribute: 'name', reflect: true })
], Tab.prototype, "name", void 0);
__decorate([
    property({ type: String })
], Tab.prototype, "label", void 0);
__decorate([
    property({ type: String })
], Tab.prototype, "description", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], Tab.prototype, "disabled", void 0);
__decorate([
    property({ type: String })
], Tab.prototype, "symbol", void 0);
__decorate([
    property({ type: String, attribute: 'icon-position' })
], Tab.prototype, "iconPosition", void 0);
__decorate([
    property({ type: Boolean, attribute: 'icon-only' })
], Tab.prototype, "iconOnly", void 0);
__decorate([
    property({ type: Boolean, attribute: 'error' })
], Tab.prototype, "error", void 0);
__decorate([
    property({ attribute: 'badge' })
], Tab.prototype, "badge", void 0);
if (!customElements.get('btu-tab')) {
    customElements.define('btu-tab', Tab);
}
//# sourceMappingURL=Tab.js.map