@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/tag/tag.js

@@ -0,0 +1,1153 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { redispatchNativeFormEvent } from "../../shared/utils/event";
+import { getFormValidationState, isFormControlDisabled, safeSetFormValue, syncNativeFormValidity, } from "../../shared/utils/form";
+import { getNextEnabledElement } from "../../shared/utils/getNextElement";
+import { generateUniqueId } from "../../shared/utils/id";
+import { hasAssignedSlotContent } from "../../shared/utils/slot";
+import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+const SHAPE_CIRCLE = 'circle';
+const SHAPE_ROUNDED = 'rounded';
+const SHAPE_DEFAULT = 'default';
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/textarea?tag=designer).
+ *
+ * @category Conteúdo
+ * @status stable
+ * @slot default - Slot para inserir o conteúdo da tag, como rótulo ou ícone.
+ * @slot label - Rótulo customizado da tag. Quando utilizado, a prop `label` é ignorada.
+ * @slot icon - Ícone customizado da tag. Quando utilizado, a prop `icon` é ignorada.
+ * @slot close-button - Botão de fechar customizado. Quando utilizado, o botão padrão é substituído.
+ * @slot feedback - Mensagem de validação, normalmente um `br-message`.
+ *
+ * @part tag - Elemento principal da tag.
+ * @part input - Elemento input da tag de seleção.
+ * @part label - Rótulo da tag de seleção.
+ * @part feedback - Contêiner da mensagem de validação.
+ */
+export class Tag {
+    constructor() {
+        /**
+         * Tag está selecionada.
+         */
+        /**
+         * Tamanho customizado normalizado a partir da prop ou do atributo no host.
+         */
+        this.customSizeValue = '';
+        this.formDisabled = false;
+        this.hasFeedbackSlot = false;
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.isValidating = false;
+        /**
+         * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.
+         * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
+         */
+        this.label = '';
+        /**
+         * A propriedade 'iconName' define um nome Iconify para o ícone exibido ao lado do texto.
+         * @deprecated Use o slot `icon` com um SVG, asset ou elemento de ícone controlado pela aplicação.
+         */
+        this.iconName = '';
+        /**
+         * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.
+         * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
+         */
+        this.name = '';
+        /** Valor submetido quando a tag selecionável está ativa. */
+        this.value = '';
+        /**
+         * A tag permite seleção múltipla.
+         */
+        this.multiple = false;
+        /**
+         * A tag está selecionada.
+         */
+        this.selected = false;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * A propriedade 'color' permite definir a cor do componente.
+         * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
+         */
+        this.bgColor = '';
+        /**
+         * Define a densidade visual do componente.
+         *
+         * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).
+         * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.
+         * - `large`: Baixa densidade (componente maior, mais espaçamento e altura).
+         *
+         */
+        this.density = 'medium';
+        /**
+         * A propriedade 'shape' define o formato do componente.
+         */
+        this.shape = SHAPE_DEFAULT;
+        /**
+         * Define o tamanho personalizado do componente quando o formato for circular (`circle`), arredondado (`rounded`) ou status.
+         * Aceita qualquer valor de tamanho CSS válido (ex: `16px`, `1.5rem`).
+         */
+        this.size = '';
+        /**
+         * Transforma a tag em um indicador de status, com aparência circular.
+         * É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
+         * @deprecated Use `variant="status"`.
+         */
+        this.status = false;
+        /**
+         * Interação deve ser habilitada.
+         * @deprecated Use `variant="action"`.
+         */
+        this.interaction = false;
+        /**
+         * Interação de seleção deve ser habilitada.
+         * @deprecated Use `variant="selectable"`.
+         */
+        this.interactionSelect = false;
+        /**
+         * Desabilita a interação com o componente.
+         *
+         */
+        this.disabled = false;
+        /** Exige uma seleção no grupo quando `interaction-select` está ativo. */
+        this.required = false;
+        /** Quantidade mínima de tags selecionadas no mesmo grupo. */
+        this.minSelections = 0;
+        /** Quantidade máxima de tags selecionadas no mesmo grupo. Zero significa sem limite. */
+        this.maxSelections = 0;
+        /**
+         * ID do elemento que fornece descrição adicional da tag.
+         * Referencia um elemento na página que contém informações complementares sobre a tag.
+         * A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.
+         * Exemplo: aria-describedby="help-status" onde existe <div id="help-status">Aguardando aprovação</div>
+         */
+        this.ariaDescribedby = null;
+        this.handleKeyDown = (event) => {
+            if (!this.effectiveSelectable || this.multiple || this.isDisabled())
+                return;
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.selectNextRadio();
+            }
+            else if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.selectPreviousRadio();
+            }
+        };
+        this.handleClose = () => {
+            this.el.remove();
+        };
+        this.handleInput = (event) => {
+            const input = event.target;
+            if (!this.multiple)
+                this.radioSelected.emit(this.name);
+            this.selected = input.checked;
+            redispatchNativeFormEvent(this.el, event, 'input');
+        };
+        this.handleChange = (event) => {
+            redispatchNativeFormEvent(this.el, event, 'change');
+            void this.validate();
+        };
+        this.initialSelected = false;
+        this.validationRunId = 0;
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+        this.updateValidity();
+    }
+    formResetCallback() {
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.validationRunId++;
+        this.selected = this.initialSelected;
+    }
+    formStateRestoreCallback(state) {
+        this.selected = state === 'selected';
+    }
+    handleInteractionChange(newValue) {
+        if (this.variant !== undefined)
+            return;
+        if (newValue && this.interactionSelect) {
+            console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
+            this.interaction = false;
+        }
+    }
+    handleInteractionSelectChange(newValue) {
+        if (this.variant !== undefined)
+            return;
+        if (newValue && this.interaction) {
+            console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
+            this.interaction = false;
+        }
+    }
+    handleSelectedChange() {
+        this.syncFormState();
+    }
+    handleSizeChange() {
+        this.updateCustomSizeValue();
+    }
+    connectedCallback() {
+        this.el.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+    }
+    componentWillLoad() {
+        this.updateCustomSizeValue();
+        this.initialSelected = this.selected;
+        this.syncFormState();
+        if (this.variant === undefined && this.interaction && this.interactionSelect) {
+            console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
+            this.interaction = false;
+        }
+    }
+    componentDidLoad() {
+        this.updateCustomSizeValue();
+        this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+        this.updateValidity();
+    }
+    handleSelectableTagInput(event) {
+        const target = event.target;
+        if (target.tagName === 'BR-TAG' && target.name === this.name)
+            requestAnimationFrame(() => this.updateValidity());
+    }
+    handleCheckedChange(event) {
+        if (event.detail === this.name && this.el !== event.target) {
+            this.selected = false;
+        }
+    }
+    /**
+     * Permite navegação por teclado (setas) entre tags do tipo radio (seleção unica).
+     * Funciona apenas quando 'interactionSelect' é true e 'multiple' é false.
+     * Ignora tags desabilitadas.
+     * @param event - Evento de teclado
+     */
+    get effectiveStatus() {
+        return this.variant === undefined ? this.status : this.variant === 'status';
+    }
+    get effectiveAction() {
+        return this.variant === undefined ? this.interaction : this.variant === 'action';
+    }
+    get effectiveSelectable() {
+        return this.variant === undefined ? this.interactionSelect : this.variant === 'selectable';
+    }
+    selectNextRadio() {
+        this.selectRadioByStep(1);
+    }
+    selectPreviousRadio() {
+        this.selectRadioByStep(-1);
+    }
+    selectRadioByStep(step) {
+        const radios = Array.from(document.querySelectorAll(`br-tag[interaction-select][name="${this.name}"]:not([disabled]), br-tag[variant="selectable"][name="${this.name}"]:not([disabled])`));
+        const nextRadio = getNextEnabledElement(radios, this.el, step > 0 ? 'forward' : 'backward');
+        if (!nextRadio)
+            return;
+        this.selectRadio(nextRadio);
+    }
+    selectRadio(nextRadio) {
+        const input = nextRadio.shadowRoot?.querySelector('input[type="radio"]');
+        if (input !== null) {
+            input.focus();
+            input.click();
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-tag': true,
+            interaction: this.effectiveAction,
+            'interaction-select': this.effectiveSelectable,
+            selected: this.selected,
+            disabled: this.isDisabled(),
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            count: this.shape === SHAPE_ROUNDED,
+            icon: this.shape === SHAPE_CIRCLE,
+            'custom-size': this.hasCustomSize,
+            status: this.effectiveStatus,
+        };
+    }
+    getTagAttributes() {
+        if (this.effectiveAction) {
+            return {
+                id: this.customId,
+            };
+        }
+        return {
+            id: this.customId,
+            role: this.getRole(),
+            'aria-label': this.getAriaLabel(),
+            'aria-busy': this.isValidating ? 'true' : null,
+            'aria-describedby': this.getAriaDescribedBy(),
+            'aria-errormessage': this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
+                ? `${this.customId}-feedback`
+                : null,
+            'aria-checked': this.getAriaChecked(),
+            'aria-disabled': this.getAriaDisabled(),
+        };
+    }
+    getAriaDescribedBy() {
+        const hostTitle = this.el.getAttribute('title');
+        if (this.hasContent(hostTitle)) {
+            return null;
+        }
+        const hasInternalLabel = !this.effectiveStatus && this.label !== '';
+        if (this.ariaDescribedby && this.ariaDescribedby.trim() !== '') {
+            return [
+                this.ariaDescribedby,
+                this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                    ? `${this.customId}-feedback`
+                    : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+        }
+        if (hasInternalLabel && !this.hasContent(this.ariaLabel)) {
+            return [
+                `${this.customId}-label`,
+                this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                    ? `${this.customId}-feedback`
+                    : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+        }
+        return this.hasFeedbackSlot || this.customValidationMessage ? `${this.customId}-feedback` : null;
+    }
+    /**
+     * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).
+     * @param value - String a ser verificada
+     * @returns {boolean} true se a string possui conteúdo
+     */
+    hasContent(value) {
+        return value?.trim().length > 0;
+    }
+    getAriaLabel() {
+        return this.ariaLabel && this.ariaLabel.trim() !== '' ? this.ariaLabel : null;
+    }
+    getRole() {
+        const hostTitle = this.el.getAttribute('title');
+        if (this.hasContent(hostTitle)) {
+            return null;
+        }
+        if (this.effectiveSelectable)
+            return this.multiple ? 'checkbox' : 'radio';
+        return 'status';
+    }
+    getAriaChecked() {
+        return this.effectiveSelectable ? (this.selected ? 'true' : 'false') : null;
+    }
+    getAriaDisabled() {
+        return this.isDisabled() ? 'true' : null;
+    }
+    updateCustomSizeValue() {
+        this.customSizeValue = (this.size || this.el.getAttribute('size') || '').trim();
+    }
+    get hasCustomSize() {
+        return (this.customSizeValue !== '' &&
+            (this.shape === SHAPE_CIRCLE || this.shape === SHAPE_ROUNDED || this.effectiveStatus));
+    }
+    get customSizeStyle() {
+        if (!this.hasCustomSize) {
+            return {};
+        }
+        return {
+            '--br-tag-custom-size': this.customSizeValue,
+        };
+    }
+    get tagStyle() {
+        return {
+            ...(this.bgColor ? { backgroundColor: this.bgColor } : {}),
+            ...this.customSizeStyle,
+        };
+    }
+    renderIcon() {
+        if (this.iconName && this.iconName.trim() !== '') {
+            return (h("slot", { name: "icon" }, h("br-icon", { iconName: this.iconName, width: "16", height: "16", "aria-hidden": "true" })));
+        }
+        return null;
+    }
+    renderLabel() {
+        const hasIcon = this.iconName.trim() !== '';
+        const shouldRenderCircleLabel = this.shape === SHAPE_CIRCLE && this.hasCustomSize && this.label.trim() !== '' && !hasIcon;
+        return (this.shape !== SHAPE_CIRCLE || shouldRenderCircleLabel) && !this.effectiveStatus ? (h("span", { id: `${this.customId}-label` }, h("slot", { name: "label" }, this.label))) : null;
+    }
+    renderCloseButton() {
+        if (!this.effectiveAction)
+            return null;
+        return (h("slot", { name: "close-button" }, h("br-button", { shape: "circle", emphasis: "primary", density: "small", "prop:ariaLabel": `Fechar ${this.label || 'tag'}`, onClick: this.handleClose, disabled: this.isDisabled() }, h("br-icon", { iconName: "fa-solid:times", width: "16", height: "16", "aria-hidden": "true" }))));
+    }
+    renderStatusLabel() {
+        return this.effectiveStatus ? h("span", { class: "tag-spacing-status" }, this.label) : null;
+    }
+    renderMainTagContent() {
+        return (h("span", { class: this.getCssClassMap(), ...this.getTagAttributes(), style: this.tagStyle, part: "tag" }, this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", null)));
+    }
+    renderStatusLayout(content) {
+        return (h("span", { style: { display: 'flex', alignItems: 'center' } }, content, this.renderStatusLabel()));
+    }
+    syncFormState() {
+        safeSetFormValue(this.elementInternals, this.effectiveSelectable && this.selected ? this.value || this.label : null, this.selected ? 'selected' : 'unselected');
+        this.updateValidity();
+    }
+    /** Retorna se a tag selecionável atende às constraints configuradas. */
+    async checkValidity() {
+        return this.elementInternals?.checkValidity?.() ?? true;
+    }
+    /** Valida e solicita ao navegador a apresentação do erro atual. */
+    async reportValidity() {
+        return this.elementInternals?.reportValidity?.() ?? true;
+    }
+    /** Define ou limpa uma mensagem de validade customizada. */
+    async setCustomValidity(message) {
+        this.customValidationMessage = message;
+        this.updateValidity();
+    }
+    /** Executa o validator da tag e retorna se o valor atual é válido. */
+    async validate() {
+        const validator = resolveFormValidator(this.validator);
+        if (!validator || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        this.updateValidity();
+        this.brTagValidationChange.emit({ validating: true, valid: null, message: null });
+        const message = await runFormValidator(validator, {
+            selected: this.selected,
+            value: this.value,
+            label: this.label,
+        });
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        this.updateValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brTagValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled);
+    }
+    updateValidity() {
+        if (!this.nativeInput)
+            return;
+        const root = this.el.getRootNode();
+        const group = Array.from(root.querySelectorAll('br-tag[interaction-select]')).filter((tag) => tag.name === this.name && !tag.disabled);
+        const selectedCount = group.filter((tag) => tag.selected).length;
+        const minimum = Math.max(this.required ? 1 : 0, this.minSelections);
+        const groupMessage = minimum > 0 && selectedCount < minimum
+            ? `Selecione pelo menos ${minimum} opções.`
+            : this.maxSelections > 0 && selectedCount > this.maxSelections
+                ? `Selecione no máximo ${this.maxSelections} opções.`
+                : '';
+        this.nativeInput.setCustomValidity(this.effectiveSelectable ? this.customValidationMessage || this.validatorMessage || groupMessage : '');
+        syncNativeFormValidity(this.elementInternals, this.nativeInput);
+    }
+    renderInteractionSelectTag() {
+        if (!this.effectiveSelectable) {
+            return null;
+        }
+        return (h("span", { class: this.getCssClassMap(), id: this.customId, part: "tag", style: this.customSizeStyle }, h("input", { part: "input", id: `input-${this.customId}`, type: this.multiple ? 'checkbox' : 'radio', ref: (el) => (this.nativeInput = el), name: this.name, value: this.value || this.label, checked: this.selected, onInput: this.handleInput, onChange: this.handleChange, disabled: this.isDisabled(), required: this.required }), h("label", { part: "label", htmlFor: `input-${this.customId}` }, this.renderIcon(), this.renderLabel())));
+    }
+    render() {
+        const mainContent = this.renderMainTagContent();
+        return (h(Host, { key: 'd7c0423b88b46e813515c59955fb52a1e6f37971' }, this.effectiveSelectable
+            ? this.renderInteractionSelectTag()
+            : this.effectiveStatus
+                ? this.renderStatusLayout(mainContent)
+                : mainContent, h("div", { key: 'f6a545533605b25e08ddc495526be922d6e70b24', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '5463a29fbde7ca85aa6437c6997b5e28a89e37c3', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+    }
+    static get is() { return "br-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'label' \u00E9 uma string que representa o texto a ser exibido no componente.\nEla \u00E9 refletida no DOM, permitindo que altera\u00E7\u00F5es no valor sejam refletidas no elemento HTML correspondente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use o slot `icon` com um SVG, asset ou elemento de \u00EDcone controlado pela aplica\u00E7\u00E3o."
+                        }],
+                    "text": "A propriedade 'iconName' define um nome Iconify para o \u00EDcone exibido ao lado do texto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-name",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'name' \u00E9 uma string que representa o nome do grupo da tag para sele\u00E7\u00E3o.\nEla \u00E9 refletida no DOM, permitindo que altera\u00E7\u00F5es no valor sejam refletidas no elemento HTML correspondente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor submetido quando a tag selecion\u00E1vel est\u00E1 ativa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "validator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagValidator",
+                    "resolved": "(value: TagValidationValue) => string | Promise<string>",
+                    "references": {
+                        "TagValidator": {
+                            "location": "import",
+                            "path": "./tag.types",
+                            "id": "src/components/tag/tag.types.ts::TagValidator",
+                            "referenceLocation": "TagValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada ao estado e valor da tag."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A tag permite sele\u00E7\u00E3o m\u00FAltipla."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A tag est\u00E1 selecionada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "bgColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'color' permite definir a cor do componente.\nAceita valores como 'red', 'blue', entre outros, e \u00E9 refletida no DOM."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "bg-color",
+                "defaultValue": "''"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "BrDensity": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrDensity",
+                            "referenceLocation": "BrDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagShape",
+                    "resolved": "\"circle\" | \"default\" | \"rounded\"",
+                    "references": {
+                        "TagShape": {
+                            "location": "import",
+                            "path": "./tag.types",
+                            "id": "src/components/tag/tag.types.ts::TagShape",
+                            "referenceLocation": "TagShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'shape' define o formato do componente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o tamanho personalizado do componente quando o formato for circular (`circle`), arredondado (`rounded`) ou status.\nAceita qualquer valor de tamanho CSS v\u00E1lido (ex: `16px`, `1.5rem`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagVariant",
+                    "resolved": "\"action\" | \"default\" | \"selectable\" | \"status\"",
+                    "references": {
+                        "TagVariant": {
+                            "location": "import",
+                            "path": "./tag.types",
+                            "id": "src/components/tag/tag.types.ts::TagVariant",
+                            "referenceLocation": "TagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante funcional can\u00F4nica. Quando informada, tem preced\u00EAncia sobre os modos booleanos legados."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant"
+            },
+            "status": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `variant=\"status\"`."
+                        }],
+                    "text": "Transforma a tag em um indicador de status, com apar\u00EAncia circular.\n\u00C9 flex\u00EDvel podendo ser utilizado com label ou apenas a superf\u00EDcie circular (informa\u00E7\u00E3o \u00E9 transmitida por meio de cores)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "false"
+            },
+            "interaction": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `variant=\"action\"`."
+                        }],
+                    "text": "Intera\u00E7\u00E3o deve ser habilitada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interaction",
+                "defaultValue": "false"
+            },
+            "interactionSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `variant=\"selectable\"`."
+                        }],
+                    "text": "Intera\u00E7\u00E3o de sele\u00E7\u00E3o deve ser habilitada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interaction-select",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita a intera\u00E7\u00E3o com o componente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exige uma sele\u00E7\u00E3o no grupo quando `interaction-select` est\u00E1 ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "minSelections": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade m\u00EDnima de tags selecionadas no mesmo grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-selections",
+                "defaultValue": "0"
+            },
+            "maxSelections": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade m\u00E1xima de tags selecionadas no mesmo grupo. Zero significa sem limite."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-selections",
+                "defaultValue": "0"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o r\u00F3tulo acess\u00EDvel usado por tecnologias assistivas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-label"
+            },
+            "ariaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID do elemento que fornece descri\u00E7\u00E3o adicional da tag.\nReferencia um elemento na p\u00E1gina que cont\u00E9m informa\u00E7\u00F5es complementares sobre a tag.\nA descri\u00E7\u00E3o \u00E9 lida ap\u00F3s o conte\u00FAdo principal, fornecendo contexto extra aos usu\u00E1rios de leitores de tela.\nExemplo: aria-describedby=\"help-status\" onde existe <div id=\"help-status\">Aguardando aprova\u00E7\u00E3o</div>"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-describedby",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "customSizeValue": {},
+            "formDisabled": {},
+            "hasFeedbackSlot": {},
+            "customValidationMessage": {},
+            "validatorMessage": {},
+            "isValidating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioSelected",
+                "name": "radioSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `input`/`change` e leia `event.target.selected`."
+                        }],
+                    "text": "Evento emitido quando a tag \u00E9 selecionada."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "brTagValidationChange",
+                "name": "brTagValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao iniciar e concluir a valida\u00E7\u00E3o customizada."
+                },
+                "complexType": {
+                    "original": "FormValidationChangeDetail",
+                    "resolved": "FormValidationChangeDetail",
+                    "references": {
+                        "FormValidationChangeDetail": {
+                            "location": "import",
+                            "path": "../../shared/utils/validator",
+                            "id": "src/shared/utils/validator.ts::FormValidationChangeDetail",
+                            "referenceLocation": "FormValidationChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna se a tag selecion\u00E1vel atende \u00E0s constraints configuradas.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Valida e solicita ao navegador a apresenta\u00E7\u00E3o do erro atual.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define ou limpa uma mensagem de validade customizada.",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Executa o validator da tag e retorna se o valor atual \u00E9 v\u00E1lido.",
+                    "tags": []
+                }
+            },
+            "getValidationState": {
+                "complexType": {
+                    "signature": "() => Promise<FormValidationState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormValidationState": {
+                            "location": "import",
+                            "path": "../../shared/utils/form",
+                            "id": "src/shared/utils/form.ts::FormValidationState",
+                            "referenceLocation": "FormValidationState"
+                        }
+                    },
+                    "return": "Promise<FormValidationState>"
+                },
+                "docs": {
+                    "text": "Retorna um snapshot serializ\u00E1vel da Constraint Validation API.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "interaction",
+                "methodName": "handleInteractionChange"
+            }, {
+                "propName": "interactionSelect",
+                "methodName": "handleInteractionSelectChange"
+            }, {
+                "propName": "selected",
+                "methodName": "handleSelectedChange"
+            }, {
+                "propName": "size",
+                "methodName": "handleSizeChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "input",
+                "method": "handleSelectableTagInput",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "radioSelected",
+                "method": "handleCheckedChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}