@govbr-ds/webcomponents 2.0.0-next.46 → 2.0.0-next.47

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

@@ -54,7 +54,7 @@ export class Tag {
          * A propriedade 'density' permite definir a densidade do componente.
          * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.
          */
-        this.density = DENSITY_SMALL;
+        this.density = DENSITY_MEDIUM;
         /**
          * A propriedade 'shape' define o formato do componente.
          * Valores possíveis:
@@ -64,7 +64,8 @@ export class Tag {
          */
         this.shape = SHAPE_DEFAULT;
         /**
-         * Status deve ser exibido.
+         * 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).
          */
         this.status = false;
         /**
@@ -79,10 +80,41 @@ export class Tag {
          * Tag deve estar desabilitado.
          */
         this.disabled = false;
+        /**
+         * Rótulo personalizado para leitores de tela.
+         * Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela.
+         * Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).
+         */
+        this.ariaLabel = null;
+        /**
+         * 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;
         /**
          * Tag está selecionada.
          */
         this.selectedClassValue = 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
+         */
+        this.handleKeyDown = (event) => {
+            if (!this.interactionSelect || this.multiple || this.disabled)
+                return;
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.selectNextRadio();
+            }
+            else if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.selectPreviousRadio();
+            }
+        };
         this.handleClose = () => {
             this.el.remove();
         };
@@ -98,6 +130,14 @@ export class Tag {
                 this.selected = event.target.checked;
             }
         };
+        this.handleInputChange = (event) => {
+            if (this.multiple) {
+                this.handleChangeValueChecked();
+            }
+            else {
+                this.handleChangeRadioValue(event);
+            }
+        };
     }
     handleInteractionChange(newValue) {
         if (newValue && this.interactionSelect) {
@@ -111,6 +151,14 @@ export class Tag {
             this.interaction = false;
         }
     }
+    handleSelectedChange(newValue) {
+        this.selectedClassValue = newValue;
+    }
+    handleCheckedChange(event) {
+        if (event.detail === this.name && this.el !== event.target) {
+            this.selected = false;
+        }
+    }
     componentWillLoad() {
         if (this.interaction && this.interactionSelect) {
             console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
@@ -119,9 +167,32 @@ export class Tag {
     }
     connectedCallback() {
         this.selectedClassValue = this.selected;
+        this.el.addEventListener('keydown', this.handleKeyDown);
     }
-    handleSelectedChange(newValue) {
-        this.selectedClassValue = newValue;
+    disconnectedCallback() {
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+    }
+    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])`));
+        const currentIndex = radios.indexOf(this.el);
+        if (currentIndex === -1)
+            return;
+        const newIndex = (currentIndex + step + radios.length) % radios.length;
+        this.selectRadioByIndex(radios, newIndex);
+    }
+    selectRadioByIndex(radios, index) {
+        const nextRadio = radios[index];
+        const input = nextRadio.shadowRoot?.querySelector('input[type="radio"]');
+        if (input !== null) {
+            input.focus();
+            input.click();
+        }
     }
     getCssClassMap() {
         return {
@@ -129,7 +200,8 @@ export class Tag {
             interaction: this.interaction,
             'interaction-select': this.interactionSelect,
             selected: this.selectedClassValue,
-            [this.color]: !!this.color,
+            disabled: this.disabled,
+            [this.color]: this.color !== '',
             [DENSITY_SMALL]: this.density === DENSITY_SMALL,
             [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,
             [DENSITY_LARGE]: this.density === DENSITY_LARGE,
@@ -138,28 +210,94 @@ export class Tag {
             status: this.status,
         };
     }
+    getTagAttributes() {
+        if (this.interaction) {
+            return {
+                id: this.customId,
+            };
+        }
+        return {
+            id: this.customId,
+            role: this.getRole(),
+            'aria-label': this.getAriaLabel(),
+            'aria-describedby': this.getAriaDescribedBy(),
+            'aria-checked': this.getAriaChecked(),
+            'aria-disabled': this.getAriaDisabled(),
+        };
+    }
+    getAriaDescribedBy() {
+        const hostTitle = this.el.getAttribute('title');
+        if (this.hasContent(hostTitle)) {
+            return null;
+        }
+        const hasInternalLabel = !this.status && this.label !== '';
+        if (this.ariaDescribedby && this.ariaDescribedby.trim() !== '') {
+            return this.ariaDescribedby;
+        }
+        if (hasInternalLabel && !this.hasContent(this.ariaLabel)) {
+            return `${this.customId}-label`;
+        }
+        return 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.interactionSelect)
+            return this.multiple ? 'checkbox' : 'radio';
+        return 'status';
+    }
+    getAriaChecked() {
+        return this.interactionSelect ? (this.selected ? 'true' : 'false') : null;
+    }
+    getAriaDisabled() {
+        return this.disabled ? 'true' : null;
+    }
     renderIcon() {
         return this.iconName && this.iconName.trim() !== '' ? (h("br-icon", { "icon-name": this.iconName, "aria-hidden": "true" })) : null;
     }
     renderLabel() {
-        return this.shape !== SHAPE_CIRCLE && !this.status ? h("span", null, this.label) : null;
+        return this.shape !== SHAPE_CIRCLE && !this.status ? h("span", { id: `${this.customId}-label` }, this.label) : null;
     }
     renderCloseButton() {
         if (!this.interaction)
             return null;
-        return (h("br-button", { type: "button", shape: "circle", emphasis: "primary", "aria-label": "Fechar", onClick: this.handleClose, disabled: this.disabled }, h("br-icon", { "icon-name": "fa-solid:times" })));
+        return (h("br-button", { shape: "circle", emphasis: "primary", density: "small", "aria-label": `Fechar ${this.label || 'tag'}`, onClick: this.handleClose, disabled: this.disabled }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" })));
     }
     renderStatusLabel() {
         return this.status ? h("span", { class: "tag-spacing-status" }, this.label) : null;
     }
-    handleCheckedChange(event) {
-        if (event.detail === this.name && this.el !== event.target) {
-            this.selected = false;
+    renderMainTagContent() {
+        return (h("span", { class: this.getCssClassMap(), ...this.getTagAttributes() }, this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", null)));
+    }
+    renderStatusLayout(content) {
+        return (h("span", { style: { display: 'flex', alignItems: 'center' } }, content, this.renderStatusLabel()));
+    }
+    renderInteractionSelectTag() {
+        if (!this.interactionSelect) {
+            return null;
         }
+        return (h("span", { class: this.getCssClassMap(), id: this.customId }, h("input", { id: `input-${this.customId}`, type: this.multiple ? 'checkbox' : 'radio', name: this.name, value: this.label, checked: this.selected, onClick: this.handleInputChange, disabled: this.disabled }), h("label", { htmlFor: `input-${this.customId}` }, this.renderIcon(), this.renderLabel())));
     }
     render() {
-        const mainTagContent = (h("span", { key: 'dfce960e3abd7a5f912a918844149ff4e58654be', class: this.getCssClassMap(), id: this.customId }, this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: '19138e10d57781d6bef7a39d6733c34ba8b05dfd' })));
-        return (h(Host, { key: '7c0a8ee21e61ebc7d26ed5dc0aa0c2ed32fd5a59' }, !this.status ? (mainTagContent) : (h("div", { style: { display: 'flex', alignItems: 'center' } }, mainTagContent, this.renderStatusLabel())), this.interactionSelect && (h("span", { key: '3dcdeda8a717a78078a1356e8eaef93be5cdd644', class: this.getCssClassMap(), id: this.customId }, this.multiple ? (h("input", { id: this.label, type: "checkbox", name: this.name, value: this.label, checked: this.selected, onClick: this.handleChangeValueChecked, disabled: this.disabled })) : (h("input", { id: this.label, type: "radio", name: this.name, value: this.label, checked: this.selected, onClick: this.handleChangeRadioValue, disabled: this.disabled })), h("label", { key: '6033995da35d020b8bb383316e06f6903350ad54', htmlFor: this.label }, this.renderIcon(), h("span", { key: 'e41a67b814704e4b21a0d4ae664ddbd372f77183' }, this.label))))));
+        const mainContent = this.renderMainTagContent();
+        return (h(Host, { key: 'd93a1ef9a900e1e508f312768c4f850c9ef0528c' }, this.interactionSelect
+            ? this.renderInteractionSelectTag()
+            : this.status
+                ? this.renderStatusLayout(mainContent)
+                : mainContent));
     }
     static get is() { return "br-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -334,7 +472,7 @@ export class Tag {
                 "setter": false,
                 "attribute": "density",
                 "reflect": true,
-                "defaultValue": "DENSITY_SMALL"
+                "defaultValue": "DENSITY_MEDIUM"
             },
             "shape": {
                 "type": "string",
@@ -368,7 +506,7 @@ export class Tag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Status deve ser exibido."
+                    "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,
@@ -435,6 +573,46 @@ export class Tag {
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo personalizado para leitores de tela.\nQuando fornecido, substitui completamente o texto vis\u00EDvel para usu\u00E1rios de leitores de tela.\n\u00DAtil quando o texto vis\u00EDvel n\u00E3o \u00E9 suficientemente descritivo (ex: \u00EDcones, abrevia\u00E7\u00F5es)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "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,
+                "attribute": "aria-describedby",
+                "reflect": true,
+                "defaultValue": "null"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer).\n *\n * @slot default - Espaço de conteúdo do tag. Geralmente usado para incluir o rótulo ou um ícone.\n */\n\n// Constantes para valores fixos\nconst DENSITY_SMALL = 'small'\nconst DENSITY_MEDIUM = 'medium'\nconst DENSITY_LARGE = 'large'\n\nconst SHAPE_CIRCLE = 'circle'\nconst SHAPE_ROUNDED = 'rounded'\nconst SHAPE_DEFAULT = 'default'\n\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrTagElement\n\n  /** API de controle de formulário nativa */\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) readonly iconName: string = ''\n\n  /**\n   * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly name: string = ''\n\n  /**\n   * A tag permite seleção múltipla.\n   * */\n  @Prop({ reflect: true }) readonly multiple: boolean = false\n\n  /**\n   * A tag está selecionada.\n   * */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-tag-${tagId++}`\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = DENSITY_SMALL\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) readonly shape: 'circle' | 'rounded' | 'default' = SHAPE_DEFAULT\n\n  /**\n   * Status deve ser exibido.\n   */\n  @Prop({ reflect: true }) readonly status: boolean = false\n\n  /**\n   * Interação deve ser habilitada.\n   */\n  @Prop({ reflect: true, mutable: true }) interaction: boolean = false\n\n  /**\n   * Interação de seleção deve ser habilitada.\n   * */\n  @Prop({ reflect: true }) interactionSelect: boolean = false\n\n  /**\n   * Tag deve estar desabilitado.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Tag está selecionada.\n   */\n  @State() selectedClassValue: boolean = false\n\n  /**\n   * Evento emitido quando a tag é selecionada.\n   */\n  @Event() radioSelected: EventEmitter<string>\n\n  @Watch('interaction')\n  handleInteractionChange(newValue: boolean) {\n    if (newValue && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('interactionSelect')\n  handleInteractionSelectChange(newValue: boolean) {\n    if (newValue && this.interaction) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  componentWillLoad() {\n    if (this.interaction && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n  connectedCallback() {\n    this.selectedClassValue = this.selected\n  }\n\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    this.selectedClassValue = newValue\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-tag': true,\n      interaction: this.interaction,\n      'interaction-select': this.interactionSelect,\n      selected: this.selectedClassValue,\n      [this.color]: !!this.color,\n      [DENSITY_SMALL]: this.density === DENSITY_SMALL,\n      [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,\n      [DENSITY_LARGE]: this.density === DENSITY_LARGE,\n      count: this.shape === SHAPE_ROUNDED,\n      icon: this.shape === SHAPE_CIRCLE,\n      status: this.status,\n    }\n  }\n\n  private renderIcon() {\n    return this.iconName && this.iconName.trim() !== '' ? (\n      <br-icon icon-name={this.iconName} aria-hidden=\"true\" />\n    ) : null\n  }\n\n  private renderLabel() {\n    return this.shape !== SHAPE_CIRCLE && !this.status ? <span>{this.label}</span> : null\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis=\"primary\"\n        aria-label=\"Fechar\"\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    return this.status ? <span class=\"tag-spacing-status\">{this.label}</span> : null\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  private handleChangeValueChecked = () => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n    }\n    this.selected = !this.selected\n  }\n\n  private handleChangeRadioValue = (event: MouseEvent) => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n      this.selected = (event.target as HTMLInputElement).checked\n    }\n  }\n\n  @Listen('radioSelected', { target: 'document' })\n  handleCheckedChange(event: CustomEvent) {\n    if (event.detail === this.name && this.el !== event.target) {\n      this.selected = false\n    }\n  }\n\n  render() {\n    const mainTagContent = (\n      <span class={this.getCssClassMap()} id={this.customId}>\n        {this.renderIcon()}\n        {this.renderLabel()}\n        {this.renderCloseButton()}\n        <slot></slot>\n      </span>\n    )\n\n    return (\n      <Host>\n        {!this.status ? (\n          mainTagContent\n        ) : (\n          <div style={{ display: 'flex', alignItems: 'center' }}>\n            {mainTagContent}\n            {this.renderStatusLabel()}\n          </div>\n        )}\n\n        {this.interactionSelect && (\n          <span class={this.getCssClassMap()} id={this.customId}>\n            {this.multiple ? (\n              <input\n                id={this.label}\n                type=\"checkbox\"\n                name={this.name}\n                value={this.label}\n                checked={this.selected}\n                onClick={this.handleChangeValueChecked}\n                disabled={this.disabled}\n              />\n            ) : (\n              <input\n                id={this.label}\n                type=\"radio\"\n                name={this.name}\n                value={this.label}\n                checked={this.selected}\n                onClick={this.handleChangeRadioValue}\n                disabled={this.disabled}\n              />\n            )}\n            <label htmlFor={this.label}>\n              {this.renderIcon()}\n              <span>{this.label}</span>\n            </label>\n          </span>\n        )}\n      </Host>\n    )\n  }\n}\n\nlet tagId = 0\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer).\n *\n * @slot default - Espaço de conteúdo do tag. Geralmente usado para incluir o rótulo ou um ícone.\n */\n\n// Constantes para valores fixos\nconst DENSITY_SMALL = 'small'\nconst DENSITY_MEDIUM = 'medium'\nconst DENSITY_LARGE = 'large'\n\nconst SHAPE_CIRCLE = 'circle'\nconst SHAPE_ROUNDED = 'rounded'\nconst SHAPE_DEFAULT = 'default'\n\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrTagElement\n\n  /** API de controle de formulário nativa */\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) readonly iconName: string = ''\n\n  /**\n   * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly name: string = ''\n\n  /**\n   * A tag permite seleção múltipla.\n   * */\n  @Prop({ reflect: true }) readonly multiple: boolean = false\n\n  /**\n   * A tag está selecionada.\n   * */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-tag-${tagId++}`\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = DENSITY_MEDIUM\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) readonly shape: 'circle' | 'rounded' | 'default' = SHAPE_DEFAULT\n\n  /**\n   * Transforma a tag em um indicador de status, com aparência circular.\n   * É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).\n   */\n  @Prop({ reflect: true }) readonly status: boolean = false\n\n  /**\n   * Interação deve ser habilitada.\n   */\n  @Prop({ reflect: true, mutable: true }) interaction: boolean = false\n\n  /**\n   * Interação de seleção deve ser habilitada.\n   * */\n  @Prop({ reflect: true }) interactionSelect: boolean = false\n\n  /**\n   * Tag deve estar desabilitado.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Rótulo personalizado para leitores de tela.\n   * Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela.\n   * Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).\n   */\n  @Prop({ reflect: true }) readonly ariaLabel: string = null\n\n  /**\n   * ID do elemento que fornece descrição adicional da tag.\n   * Referencia um elemento na página que contém informações complementares sobre a tag.\n   * A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.\n   * Exemplo: aria-describedby=\"help-status\" onde existe <div id=\"help-status\">Aguardando aprovação</div>\n   */\n  @Prop({ reflect: true }) readonly ariaDescribedby: string = null\n\n  /**\n   * Tag está selecionada.\n   */\n  @State() selectedClassValue: boolean = false\n\n  /**\n   * Evento emitido quando a tag é selecionada.\n   */\n  @Event() radioSelected: EventEmitter<string>\n\n  @Watch('interaction')\n  handleInteractionChange(newValue: boolean) {\n    if (newValue && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('interactionSelect')\n  handleInteractionSelectChange(newValue: boolean) {\n    if (newValue && this.interaction) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    this.selectedClassValue = newValue\n  }\n\n  @Listen('radioSelected', { target: 'document' })\n  handleCheckedChange(event: CustomEvent) {\n    if (event.detail === this.name && this.el !== event.target) {\n      this.selected = false\n    }\n  }\n\n  componentWillLoad() {\n    if (this.interaction && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n  connectedCallback() {\n    this.selectedClassValue = this.selected\n    this.el.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('keydown', this.handleKeyDown)\n  }\n  /**\n   * Permite navegação por teclado (setas) entre tags do tipo radio (seleção unica).\n   * Funciona apenas quando 'interactionSelect' é true e 'multiple' é false.\n   * Ignora tags desabilitadas.\n   * @param event - Evento de teclado\n   */\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.interactionSelect || this.multiple || this.disabled) return\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault()\n      this.selectNextRadio()\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      this.selectPreviousRadio()\n    }\n  }\n\n  private selectNextRadio() {\n    this.selectRadioByStep(1)\n  }\n\n  private selectPreviousRadio() {\n    this.selectRadioByStep(-1)\n  }\n\n  private selectRadioByStep(step: number) {\n    const radios = Array.from(\n      document.querySelectorAll(`br-tag[interaction-select][name=\"${this.name}\"]:not([disabled])`)\n    ) as HTMLElement[]\n    const currentIndex = radios.indexOf(this.el)\n    if (currentIndex === -1) return\n    const newIndex = (currentIndex + step + radios.length) % radios.length\n    this.selectRadioByIndex(radios, newIndex)\n  }\n\n  private selectRadioByIndex(radios: HTMLElement[], index: number) {\n    const nextRadio = radios[index] as HTMLBrTagElement\n    const input = nextRadio.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement | null\n    if (input !== null) {\n      input.focus()\n      input.click()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-tag': true,\n      interaction: this.interaction,\n      'interaction-select': this.interactionSelect,\n      selected: this.selectedClassValue,\n      disabled: this.disabled,\n      [this.color]: this.color !== '',\n      [DENSITY_SMALL]: this.density === DENSITY_SMALL,\n      [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,\n      [DENSITY_LARGE]: this.density === DENSITY_LARGE,\n      count: this.shape === SHAPE_ROUNDED,\n      icon: this.shape === SHAPE_CIRCLE,\n      status: this.status,\n    }\n  }\n\n  private getTagAttributes() {\n    if (this.interaction) {\n      return {\n        id: this.customId,\n      }\n    }\n\n    return {\n      id: this.customId,\n      role: this.getRole(),\n      'aria-label': this.getAriaLabel(),\n      'aria-describedby': this.getAriaDescribedBy(),\n      'aria-checked': this.getAriaChecked(),\n      'aria-disabled': this.getAriaDisabled(),\n    }\n  }\n\n  private getAriaDescribedBy(): string | null {\n    const hostTitle = this.el.getAttribute('title')\n    if (this.hasContent(hostTitle)) {\n      return null\n    }\n\n    const hasInternalLabel = !this.status && this.label !== ''\n\n    if (this.ariaDescribedby && this.ariaDescribedby.trim() !== '') {\n      return this.ariaDescribedby\n    }\n\n    if (hasInternalLabel && !this.hasContent(this.ariaLabel)) {\n      return `${this.customId}-label`\n    }\n\n    return null\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private getAriaLabel(): string | null {\n    return this.ariaLabel && this.ariaLabel.trim() !== '' ? this.ariaLabel : null\n  }\n\n  private getRole(): string | null {\n    const hostTitle = this.el.getAttribute('title')\n    if (this.hasContent(hostTitle)) {\n      return null\n    }\n\n    if (this.interactionSelect) return this.multiple ? 'checkbox' : 'radio'\n    return 'status'\n  }\n\n  private getAriaChecked(): string | null {\n    return this.interactionSelect ? (this.selected ? 'true' : 'false') : null\n  }\n\n  private getAriaDisabled(): string | null {\n    return this.disabled ? 'true' : null\n  }\n\n  private renderIcon() {\n    return this.iconName && this.iconName.trim() !== '' ? (\n      <br-icon icon-name={this.iconName} aria-hidden=\"true\" />\n    ) : null\n  }\n\n  private renderLabel() {\n    return this.shape !== SHAPE_CIRCLE && !this.status ? <span id={`${this.customId}-label`}>{this.label}</span> : null\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        shape=\"circle\"\n        emphasis=\"primary\"\n        density=\"small\"\n        aria-label={`Fechar ${this.label || 'tag'}`}\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    return this.status ? <span class=\"tag-spacing-status\">{this.label}</span> : null\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  private handleChangeValueChecked = () => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n    }\n    this.selected = !this.selected\n  }\n\n  private handleChangeRadioValue = (event: MouseEvent) => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n      this.selected = (event.target as HTMLInputElement).checked\n    }\n  }\n\n  private renderMainTagContent() {\n    return (\n      <span class={this.getCssClassMap()} {...this.getTagAttributes()}>\n        {this.renderIcon()}\n        {this.renderLabel()}\n        {this.renderCloseButton()}\n        <slot></slot>\n      </span>\n    )\n  }\n\n  private renderStatusLayout(content: JSX.Element) {\n    return (\n      <span style={{ display: 'flex', alignItems: 'center' }}>\n        {content}\n        {this.renderStatusLabel()}\n      </span>\n    )\n  }\n\n  private handleInputChange = (event: MouseEvent) => {\n    if (this.multiple) {\n      this.handleChangeValueChecked()\n    } else {\n      this.handleChangeRadioValue(event)\n    }\n  }\n\n  private renderInteractionSelectTag() {\n    if (!this.interactionSelect) {\n      return null\n    }\n\n    return (\n      <span class={this.getCssClassMap()} id={this.customId}>\n        <input\n          id={`input-${this.customId}`}\n          type={this.multiple ? 'checkbox' : 'radio'}\n          name={this.name}\n          value={this.label}\n          checked={this.selected}\n          onClick={this.handleInputChange}\n          disabled={this.disabled}\n        />\n        <label htmlFor={`input-${this.customId}`}>\n          {this.renderIcon()}\n          {this.renderLabel()}\n        </label>\n      </span>\n    )\n  }\n\n  render() {\n    const mainContent = this.renderMainTagContent()\n\n    return (\n      <Host>\n        {this.interactionSelect\n          ? this.renderInteractionSelectTag()\n          : this.status\n            ? this.renderStatusLayout(mainContent)\n            : mainContent}\n      </Host>\n    )\n  }\n}\n\nlet tagId = 0\n"]}

package/dist/collection/components/textarea/textarea.js

@@ -37,15 +37,15 @@ export class Textarea {
         this.isInline = false;
         this.handleInput = (event) => {
             this.value = event.target.value;
-            this.currentLength = this.value?.length;
+            this.currentLength = this.value?.length || 0;
             this.valueChange.emit(this.value);
         };
     }
     componentWillLoad() {
-        this.currentLength = this.value?.length;
+        this.currentLength = this.value?.length || 0;
     }
     valueChanged() {
-        this.currentLength = this.value?.length;
+        this.currentLength = this.value?.length || 0;
     }
     /**
      * Define um novo valor para o textarea.
@@ -53,9 +53,35 @@ export class Textarea {
      */
     async setValue(newValue) {
         this.value = newValue;
-        this.currentLength = this.value?.length;
+        this.currentLength = this.value?.length || 0;
         this.valueChange.emit(this.value);
     }
+    /**
+     * Retorna os ids para o atributo aria-describedby do textarea
+     */
+    getDescribedBy() {
+        return [this.showCounter ? `${this.customId}-limitMax` : null, `${this.customId}-slotInfo`]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /**
+     * Determina o texto a ser usado para acessibilidade quando não há label
+     * Ordem de prioridade:
+     *  - aria-label do elemento host
+     *  - propriedade ariaLabel do componente
+     *  - placeholder
+     *  - texto padrão ("Campo de texto")
+     */
+    getAccessibilityLabel() {
+        const hostAriaLabel = this.el.getAttribute('aria-label');
+        return hostAriaLabel && hostAriaLabel.trim() !== ''
+            ? hostAriaLabel
+            : this.ariaLabel && this.ariaLabel.trim() !== ''
+                ? this.ariaLabel
+                : this.placeholder && this.placeholder.trim() !== ''
+                    ? this.placeholder
+                    : 'Campo de texto';
+    }
     getCssClassMap() {
         return {
             'br-textarea': true,
@@ -70,7 +96,8 @@ export class Textarea {
     render() {
         const caracteresRestantes = this.maxlength - this.currentLength;
         const mostrarLimite = this.currentLength > 0;
-        return (h(Host, { key: '31b508c72540c266449933596ccbc8fd960962e7' }, h("div", { key: 'bfa11fb0b9e66c7fec97c8ad67cd2c5cb253a8b6', class: this.getCssClassMap() }, h("div", { key: 'fe27960edc7144abd6f91dd2b194127f6afa5d65', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: 'f6b05e4e30c67bcd270571ab949eaee7ce9e5ab2', class: this.isInline ? 'col' : '' }, h("textarea", { key: '9afe24806c27a70801b5da76082cfc83460612ca', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, ...(this.maxlength > 0 ? { maxLength: this.maxlength } : {}) }), h("div", { key: '883a4d10573927cac2fdc63190e565d053c9a45f', class: "text-base mt-1" }, this.showCounter && (h("div", { key: '6301a3bdafa2d318e8d5dbd69c40e94750cda564' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitMax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: '0a8e1a6fa116134023d1202cb65d54aa534914cb' }))))));
+        const hasLabel = !!this.label;
+        return (h(Host, { key: '2ef9c7541022573e6c1da8a05e5d10e4831d1348' }, h("div", { key: 'b8756f018a5517345ba33c746b8927dc7107ba5c', class: this.getCssClassMap() }, h("div", { key: 'ffa093877353602fdebe1f5d4e7c45c2fc3f63d3', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '8afafd7535e57a978ead59165eb6b227b02820be', class: this.isInline ? 'col' : '' }, h("textarea", { key: '83772b0c42ea0d09991e4a622d8f86851bda2a8b', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, ...(this.maxlength > 0 ? { maxLength: this.maxlength } : {}), "aria-describedby": this.getDescribedBy(), ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), h("div", { key: '7e1a019e4186f4d888fd2898665aa3037f543a8e', class: "text-base mt-1" }, this.showCounter && (h("div", { key: '9e80a2b49f9f107acf8a07958c5ba15881bc0fd9' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax` }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax` }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("div", { key: 'cb5d661d80018f2e3a3159d7e3b427a26572e1c0', id: `${this.customId}-slotInfo`, "aria-live": "polite" }, h("slot", { key: '38bace1df619a710ba8474e19e21ff76cf27563c' })))))));
     }
     static get is() { return "br-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -144,6 +171,25 @@ export class Textarea {
                 "attribute": "placeholder",
                 "reflect": true
             },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto alternativo para acessibilidade quando n\u00E3o h\u00E1 label vis\u00EDvel.\nFornece um r\u00F3tulo para tecnologias assistivas sem exibir visualmente."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": true
+            },
             "customId": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Valor exibido no textarea.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) readonly label: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) readonly placeholder: string\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-textarea-${textareaId++}`\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) readonly maxlength: number = 0\n\n  /**\n   * Mostra o contador com a quantidade máxima de caracteres.\n   */\n  @Prop({ reflect: true }) readonly showCounter: boolean = false\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) readonly state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) readonly isInline: boolean = false\n\n  /**\n   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length\n  }\n\n  /**\n   * Valor atualizado do textarea\n   */\n  @Event() valueChange: EventEmitter<string>\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value?.length\n  }\n\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.currentLength = this.value?.length\n    this.valueChange.emit(this.value)\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value?.length\n    this.valueChange.emit(this.value)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  render() {\n    const caracteresRestantes: number = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength > 0\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()}>\n          <div class={this.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleInput}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.showCounter && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitMax\">\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\">\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n\nlet textareaId = 0\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAA;AAItB;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAiCE;;;WAGG;QAC+B,aAAQ,GAAW,eAAe,UAAU,EAAE,EAAE,CAAA;QAElF;;WAEG;QAC+B,aAAQ,GAAY,KAAK,CAAA;QAE3D;;WAEG;QAC+B,cAAS,GAAW,CAAC,CAAA;QAEvD;;WAEG;QAC+B,gBAAW,GAAY,KAAK,CAAA;QAM9D;;WAEG;QAC+B,YAAO,GAAiC,QAAQ,CAAA;QAElF;;WAEG;QAC+B,aAAQ,GAAY,KAAK,CAAA;QAqB1C,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YAC9C,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;YACrD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAA;YAC5C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAA;KA0GF;IA5HC,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAA;IAC9C,CAAC;IAQD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAA;IAC9C,CAAC;IAQD;;;OAGG;IAEH,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAA;QACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAA;QAC5C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACnC,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,WAAW,CAAC;aACxF,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAA;IACd,CAAC;IAED;;;;;;;OAOG;IACK,qBAAqB;QAC3B,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAA;QAExD,OAAO,aAAa,IAAI,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YACjD,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE;gBAC9C,CAAC,CAAC,IAAI,CAAC,SAAS;gBAChB,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE;oBAClD,CAAC,CAAC,IAAI,CAAC,WAAW;oBAClB,CAAC,CAAC,gBAAgB,CAAA;IAC1B,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,aAAa,EAAE,IAAI;YACnB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACjC,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC/B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAW,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAA;QACvE,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QAC5C,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;QAE7B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC/B,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;oBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,WAAK,KAAK,EAAC,kBAAkB;wBAC3B,aAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAC/C,CACP,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD;oBAED,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;wBACpC,iEACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,KACrB,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,sBAC3C,IAAI,CAAC,cAAc,EAAE,KACnC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC3D;wBACZ,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,WAAW,IAAI,CACnB,8DACG,aAAa,CAAC,CAAC,CAAC,CACf,YAAM,KAAK,EAAC,WAAW,eAAW,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,WAAW;;4BAC/E,kBAAS,mBAAmB,CAAU;0CACxC,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,OAAO,eAAW,QAAQ,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,WAAW;;4BACnD,kBAAS,IAAI,CAAC,SAAS,CAAU;0CAC7C,CACR,CACG,CACP,CACG;wBACN,4DAAK,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,WAAW,eAAY,QAAQ;4BACtD,8DAAa,CACT,CACF,CACF,CACF,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAA","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Valor exibido no textarea.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) readonly label: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) readonly placeholder: string\n\n  /**\n   * Texto alternativo para acessibilidade quando não há label visível.\n   * Fornece um rótulo para tecnologias assistivas sem exibir visualmente.\n   */\n  @Prop({ reflect: true }) readonly ariaLabel: string\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-textarea-${textareaId++}`\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) readonly maxlength: number = 0\n\n  /**\n   * Mostra o contador com a quantidade máxima de caracteres.\n   */\n  @Prop({ reflect: true }) readonly showCounter: boolean = false\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) readonly state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) readonly isInline: boolean = false\n\n  /**\n   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length || 0\n  }\n\n  /**\n   * Valor atualizado do textarea\n   */\n  @Event() valueChange: EventEmitter<string>\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value?.length || 0\n  }\n\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.currentLength = this.value?.length || 0\n    this.valueChange.emit(this.value)\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value?.length || 0\n    this.valueChange.emit(this.value)\n  }\n\n  /**\n   * Retorna os ids para o atributo aria-describedby do textarea\n   */\n  private getDescribedBy(): string {\n    return [this.showCounter ? `${this.customId}-limitMax` : null, `${this.customId}-slotInfo`]\n      .filter(Boolean)\n      .join(' ')\n  }\n\n  /**\n   * Determina o texto a ser usado para acessibilidade quando não há label\n   * Ordem de prioridade:\n   *  - aria-label do elemento host\n   *  - propriedade ariaLabel do componente\n   *  - placeholder\n   *  - texto padrão (\"Campo de texto\")\n   */\n  private getAccessibilityLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n\n    return hostAriaLabel && hostAriaLabel.trim() !== ''\n      ? hostAriaLabel\n      : this.ariaLabel && this.ariaLabel.trim() !== ''\n        ? this.ariaLabel\n        : this.placeholder && this.placeholder.trim() !== ''\n          ? this.placeholder\n          : 'Campo de texto'\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  render() {\n    const caracteresRestantes: number = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength > 0\n    const hasLabel = !!this.label\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()}>\n          <div class={this.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleInput}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n                aria-describedby={this.getDescribedBy()}\n                {...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.showCounter && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id={`${this.customId}-limitMax`}>\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\" id={`${this.customId}-limitMax`}>\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <div id={`${this.customId}-slotInfo`} aria-live=\"polite\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n\nlet textareaId = 0\n"]}

package/dist/collection/components/tooltip/tooltip.js

@@ -345,7 +345,7 @@ export class Tooltip {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '99bea58c6f571ff49f266072d8ee4af8b4081adc' }, h("div", { key: '190c140a9059470c92450f7677ad8bef6d48b207', id: this.customId, class: this.getCssClassMap() }, h("div", { key: 'ab35ec93893f689929774cc0172e2cdf6f2f76e7', class: this.getTriggerCssClassMap(), ref: (el) => (this.triggerElement = el), "aria-describedby": `${this.customId}-content`, "aria-expanded": this.isVisible ? 'true' : 'false', "aria-controls": `${this.customId}-content`, role: "button", tabindex: "-1  " }, h("slot", { key: '62de7618f2bae7e8e5aaca4ecad10b91205ce230', name: "trigger" })), h("div", { key: 'd6dd66c4102ddbb2f0924cf9aeb3dab1bab28176', id: `${this.customId}-content`, class: this.getContentCssClassMap(), ref: (el) => (this.contentElement = el), role: this.type === 'popover' ? 'dialog' : 'tooltip', tabindex: "-1" }, h("slot", { key: '4a9403a4690b52de0dad0209b36af290601c21d0', name: "content" }), this.type === 'popover' && (h("br-button", { key: 'fd3c23f6f1bcc9654180a4b5c09bb5206a127e6d', class: "close", shape: "circle", density: "small", onClick: this.hideContent, "aria-label": "Fechar popover" }, h("br-icon", { key: '0b301c330749757e8207fb1d82041f4037e06b14', "icon-name": "fa6-solid:xmark" }))), h("div", { key: '88b50021b6ff75a51534d3c1bc57cb7b279852a4', class: this.getArrowCssClassMap(), ref: (el) => (this.arrowElement = el) })))));
+        return (h(Host, { key: '3a99ff00895f77cf90574ccbd8ccae37ce68f9bb' }, h("div", { key: 'd642b5e8747633cd155a89afa3e84e5036dfdc10', id: this.customId, class: this.getCssClassMap() }, h("div", { key: 'bb6b81ac3460ffacbe071082f634d0482c4b106c', class: this.getTriggerCssClassMap(), ref: (el) => (this.triggerElement = el), "aria-describedby": `${this.customId}-content`, "aria-expanded": this.isVisible ? 'true' : 'false', "aria-controls": `${this.customId}-content`, role: "button", tabindex: "-1  " }, h("slot", { key: '30bc547b469bc666a58f2e04203df0b44e330fef', name: "trigger" })), h("div", { key: '67c59e644d3b88deab9553accc461c2f6136a312', id: `${this.customId}-content`, class: this.getContentCssClassMap(), ref: (el) => (this.contentElement = el), role: this.type === 'popover' ? 'dialog' : 'tooltip', tabindex: "-1" }, h("slot", { key: 'e3321ee00f78e6e7332c528029d9ea6f5ceabf9d', name: "content" }), this.type === 'popover' && (h("br-button", { key: '61a1e0732d23e3eec044788b9a9953d1229c3e14', class: "close", shape: "circle", density: "small", onClick: this.hideContent, "aria-label": "Fechar popover" }, h("br-icon", { key: '93357409f8f123d36708118dc23b368ff534e0d7', "icon-name": "fa6-solid:xmark" }))), h("div", { key: 'd3fd53e7146b4e01daa827c64f526fde5f78aef9', class: this.getArrowCssClassMap(), ref: (el) => (this.arrowElement = el) })))));
     }
     static get is() { return "br-tooltip"; }
     static get encapsulation() { return "shadow"; }