@govbr-ds/webcomponents 2.4.0 → 2.5.0

package/dist/collection/components/tab/tab.js

@@ -14,39 +14,32 @@ const TAB_ALIGNMENTS = ['start', 'center', 'end'];
 const CSS_FUNCTION_HEIGHT_REGEX = /^(calc|min|max|clamp)\(.+\)$/;
 const CSS_UNIT_HEIGHT_REGEX = /^\d+(\.\d+)?(px|%|vh|vw|dvh|svh|lvh|vmin|vmax|rem|em)$/;
 /**
- * O componente `br-tab` é o organizador de navegação por abas do GovBR-DS, desenvolvido para permitir que a pessoa usuária alterne entre diferentes visões ou painéis de conteúdo correlacionados sem sair da mesma página.
+ * O `br-tab` organiza diferentes visões ou painéis de conteúdo na mesma página através de abas navegáveis.
  *
- * ### Para que serve
+ * Declare os itens usando `br-tab-item` no slot padrão. O componente gera automaticamente os botões da barra de navegação e controla a exibição do painel correspondente.
  *
- * - **Segmentação de conteúdo em mesmo nível:** Agrupa informações que compartilham o mesmo contexto geral (ex.: "Visão Geral", "Especificações", "Histórico", "Anexos").
- * - **Economia de espaço vertical:** Evita rolagens excessivas na página mantendo apenas o painel selecionado visível no momento.
- * - **Navegação acessível WAI-ARIA Tablist:** Implementa o padrão oficial de abas acessíveis: papéis semânticos `tablist`, `tab` e `tabpanel`, com controle total por setas do teclado e foco cíclico.
+ * ```html
+ * <br-tab>
+ *   <br-tab-item label="Dados Cadastrais">
+ *     <p>Conteúdo da primeira aba.</p>
+ *   </br-tab-item>
+ *   <br-tab-item label="Documentos">
+ *     <p>Conteúdo da segunda aba.</p>
+ *   </br-tab-item>
+ * </br-tab>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - Houver conjuntos equivalentes de informação entre os quais a pessoa usuária pode navegar livremente e em qualquer ordem.
- * - **Evite e prefira outro componente quando:**
- *   - O conteúdo for sequencial com dependência de avanço ou conclusão de etapas anteriores (prefira `br-step` ou `br-wizard`).
- *   - As abas tiverem a função de navegar para rotas e URLs distintas da aplicação (prefira uma barra de links com `br-link` ou `br-header`).
+ * - Alternar entre conjuntos equivalentes de informação sem sair da página e sem ordem fixa de leitura.
  *
- * ### Composição e Subcomponentes
+ * ### Quando evitar
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-tab` | **Orquestrador de abas.** Constrói a barra de navegação acessível (`tablist`), controla a aba ativa e gerencia o teclado. | Contêiner raiz obrigatório declarado no template. |
- * | `br-tab-item` | **Aba e painel associado.** Define simultaneamente o rótulo do botão da aba e o conteúdo do painel correspondente. | Declarado no slot padrão do `br-tab`. |
+ * - Processos com etapas sequenciais que dependem de preenchimento prévio: use `br-wizard` ou `br-step`.
+ * - Links para páginas ou rotas distintas: use `br-link` ou `br-header`.
  *
- * ### Como os subcomponentes se relacionam
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tab?tab=designer).
  *
- * O `br-tab` adota uma arquitetura declarativa prática:
- * 1. A aplicação declara os elementos `br-tab-item` dentro do slot padrão do `br-tab`.
- * 2. O componente pai extrai os rótulos e ícones de cada item para renderizar a barra superior de abas (`role="tab"`).
- * 3. O pai controla a visibilidade dos painéis (`role="tabpanel"`), exibindo exclusivamente o conteúdo da aba selecionada e garantindo a correlação de IDs acessíveis (`aria-controls`, `aria-labelledby`).
- *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/tab?tab=designer).
- *
-
  * @category Navegação, Seleção, Conteúdo
  * @status stable
  * @slot default - Slot para inserir os itens das abas (br-tab-item)
@@ -127,7 +120,7 @@ export class Tab {
                 this.tabItems = nextTabItems;
             }
             const colorMode = this.effectiveColorMode;
-            // Identificador de cada aba: o `id` nativo (canônico) tem precedência sobre o alias
+            // Identificador de cada aba: o `id` nativo (padrão) tem precedência sobre o alias
             // legado `tab-item-id`; só sem nenhum dos dois um id é gerado. O item pode ainda não
             // estar hidratado aqui, então os atributos são a fonte confiável. Depois do render, o
             // br-tab-item escreve `tab-panel-{tabItemId}` no próprio `id`; esse valor não é do consumidor.
@@ -448,12 +441,12 @@ export class Tab {
     render() {
         const hasCounter = this.tabItems.some((item) => item.counter);
         const resolvedHeight = this.getResolvedHeight();
-        return (h(Host, { key: '8f9bb52658cb37048b10b4c81eb4399771ab28f6' }, h("div", { key: '0aa48a13db1b2229890500afa65bd2e78b24727e', class: this.getCssClassMap(), id: this.customId, part: "container", style: resolvedHeight !== undefined ? { '--br-tab-height': resolvedHeight } : undefined }, h("div", { key: '34bb73421269703b161928f03dc9a22b2d0cf629', class: "tab-nav", role: "tablist", "aria-label": this.label, "data-counter": hasCounter ? 'true' : 'false', part: "nav", style: { justifyContent: this.getAlignItemsStyle() } }, this.tabItems.map((item, index) => {
+        return (h(Host, { key: '64b14f409cd0472e4c2c5e8db86e0491e53903e7' }, h("div", { key: '192d5bf7becc11413b1d03d0234f2312c43e0418', class: this.getCssClassMap(), id: this.customId, part: "container", style: resolvedHeight !== undefined ? { '--br-tab-height': resolvedHeight } : undefined }, h("div", { key: 'de85ca87582cfc3836646258cbe1ebcb474569d2', class: "tab-nav", role: "tablist", "aria-label": this.label, "data-counter": hasCounter ? 'true' : 'false', part: "nav", style: { justifyContent: this.getAlignItemsStyle() } }, this.tabItems.map((item, index) => {
             const isActive = item.tabItemId === this.activeTabId;
             const showOnlyIcon = item.iconOnly ?? (item.onlyIcon || item.hasAttribute('only-icon'));
             const itemLabel = item.label ?? item.tabItemTitle;
             return (h("div", { key: item.tabItemId, class: this.getTabItemCssClassMap(isActive), role: "none" }, h("button", { type: "button", id: `tab-button-${item.tabItemId}`, part: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabindex: isActive ? 0 : -1, "aria-setsize": this.tabItems.length, "aria-posinset": index + 1, "aria-label": `${itemLabel}${item.counter ? ` (${item.counter})` : ''}`, title: item.getAttribute('title') || undefined, "data-tab-id": item.tabItemId, "data-tab-index": index, onClick: this.handleTabButtonClick, onKeyDown: this.handleTabButtonKeyDown }, h("span", { class: "name" }, this.renderTabIcon(item), !showOnlyIcon && h("span", null, itemLabel))), isActive && h("span", { class: "tab-indicator", part: "indicator", "aria-hidden": "true" }), item.counter && (h("span", { id: `tab-counter-${item.tabItemId}`, class: "results" }, item.counter))));
-        })), h("br-divider", { key: '379d4698cf962821440ba0db49f6ad6c4f4d9672', "color-mode": this.effectiveColorMode }), h("div", { key: 'ae45441ee380aff00b3d10ce204468d9d5337161', class: "tab-content", part: "content" }, h("slot", { key: 'fd27af7f71c2b8ab6aceee196764b03cf53efbe0', ref: (el) => {
+        })), h("br-divider", { key: '158a6e21f71cc1738cd3ba240fda2ee98654a97a', "color-mode": this.effectiveColorMode }), h("div", { key: '845d375d272ed694f1dbc69d7f099d4d55e32f4e', class: "tab-content", part: "content" }, h("slot", { key: 'c6c32244a33caa44be22b9492fcdd73b6c5e0460', ref: (el) => {
                 this.slotElement = el;
             }, onSlotchange: this.registerTabItems })))));
     }
@@ -633,7 +626,7 @@ export class Tab {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Alinhamento horizontal can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `alignItemsTab`; valores inv\u00E1lidos usam `start`."
+                    "text": "Alinhamento horizontal. Quando informado, tem preced\u00EAncia sobre `alignItemsTab`; valores inv\u00E1lidos usam `start`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/table/table-body/table-body.js

@@ -4,20 +4,10 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * Subcomponente de corpo de dados de `br-table`, responsável por agrupar as linhas de registros de conteúdo.
+ * Corpo de dados (`<tbody>`) da tabela. Use no slot `body` do `br-table`.
  *
- * ### Papel na composição
+ * Agrupa as linhas `br-table-row` contendo as células de dados `br-table-cell`.
  *
- * - Define a região principal da tabela com a semântica de `rowgroup` de conteúdo.
- * - Recebe as linhas de dados `br-table-row` preenchidas com as células de valor `br-table-cell`.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro do slot `body` (ou padrão) de `br-table`. Ele organiza o fluxo vertical de registros coordenado pelo pai. Não deve ser usado fora de uma tabela.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
  * @part body - Wrapper do corpo da tabela.
  */
 export class TableBody {
@@ -37,7 +27,7 @@ export class TableBody {
      * @returns JSX.Element representando o elemento host do componente, contendo a estrutura do corpo da tabela.
      */
     render() {
-        return (h(Host, { key: 'c30a20723ca40ca1291d138444e34173fb110ab5', role: "rowgroup" }, h("div", { key: '05f8524511fba5c8dbe1545cad85ad8bca649ec8', class: this.getBodyCssClassMap(), role: "presentation", part: "body" }, h("slot", { key: 'c524b5a34eb6b71475ce4b317a1daf90df9af16b' }))));
+        return (h(Host, { key: 'd968fcb8d776d352cd64f98b0d3cb7f1b3db5dcb', role: "rowgroup" }, h("div", { key: '1ec4aa2b73fbecaae78a20bfbe0e2dacf4439ce6', class: this.getBodyCssClassMap(), role: "presentation", part: "body" }, h("slot", { key: 'a5e74dd158b88c53174d528a4c25233e1bfb6f6f' }))));
     }
     static get is() { return "br-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-cell/table-cell.js

@@ -7,19 +7,10 @@ import { findComposedOwner } from "../../../shared/utils/ownership";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 import { TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table-constants";
 /**
- * Subcomponente de célula de dados de `br-table`, utilizado para renderizar o valor ou conteúdo de um registro em uma coluna específica.
+ * Célula de dados (`<td>`) da tabela. Use dentro de um `br-table-row` no corpo da tabela.
  *
- * ### Papel na composição
+ * Coloque o conteúdo do registro no slot padrão.
  *
- * - Exibe o dado pontual da coluna (`role="cell"`), podendo conter texto, badges, ícones, botões de ação ou links.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro de um `br-table-row` situado no `br-table-body`. O dimensionamento e posicionamento são calculados pelas regras de CSS Grid da tabela pai.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
  * @part cell - Wrapper da célula.
  * @part content - Área de conteúdo da célula.
  */
@@ -186,7 +177,7 @@ export class TableCell {
      * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da célula da tabela.
      */
     render() {
-        return (h(Host, { key: '3670b374c4db4eedcf5376e1f99001a892143762', role: "cell" }, h("div", { key: 'd3fac05a3f8f7cf0f96c290fb2c7f20f1682e1d1', class: this.getCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '1c26cee87dd9b0567a5805f4d2fc64b2515dcb0d', class: "br-table-cell-content", role: "presentation", part: "content" }, h("div", { key: '98c5548b069fc5d2d17ee623b41063eb5f69052d', class: "br-table-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '38f7e72e47d9be1c110c64601d22de5ee9c694b1', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: '66ed7a3097354ded916781012b4eb69e243ed252', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'a2b9a320c2afddc0144a794ad93fee5eb93c29ff', slot: "content" }, this.tooltipContent)))))));
+        return (h(Host, { key: '15911927fc2d5f25b5d7d4df458feed3e8998bce', role: "cell" }, h("div", { key: '2bcfc7a283d823f40b6943f3f49b76a33212be75', class: this.getCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '588b877b48a4e9e94bb623e9d12f9ed4caf56820', class: "br-table-cell-content", role: "presentation", part: "content" }, h("div", { key: '3fca524dcc25e25f3667f24054575931f2daeccc', class: "br-table-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '77ff70851c33221a1079d013ef52b1a2afe98cc9', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: '8440ff797b7511145f872380fb46071d29d58265', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'ae95d828d50ee35707e1916137185b9f0a04c897', slot: "content" }, this.tooltipContent)))))));
     }
     static get is() { return "br-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header/table-header.js

@@ -4,20 +4,10 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * Subcomponente de cabeçalho de `br-table`, utilizado para agrupar as linhas de títulos das colunas.
+ * Cabeçalho da tabela (`br-table`). Use no slot `header`.
  *
- * ### Papel na composição
+ * Agrupa as linhas `br-table-row` com as células de cabeçalho `br-table-header-cell`.
  *
- * - Define a região superior da tabela com a semântica de `rowgroup` de cabeçalho.
- * - Recebe uma ou mais linhas `br-table-row` que contêm as células de título `br-table-header-cell`.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro do slot `header` do componente pai `br-table`. O orquestrador da tabela aplica a configuração de colunas e espaçamentos sobre o cabeçalho. Não deve ser usado isoladamente.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
  * @part header - Wrapper do cabeçalho da tabela.
  */
 export class TableHeader {
@@ -37,7 +27,7 @@ export class TableHeader {
      * @returns JSX.Element representando o elemento host do componente, contendo a estrutura do cabeçalho da tabela.
      */
     render() {
-        return (h(Host, { key: '53ac50c7e44fe2c914da90c17663b873274c468d', role: "rowgroup" }, h("div", { key: '0d6bf84f76934e2d8308b1a73403fb4a4fe88722', class: this.getHeaderCssClassMap(), role: "presentation", part: "header" }, h("slot", { key: '9518e02cbc2c3e685b908d0746c73deab35055e0' }))));
+        return (h(Host, { key: '5ca1b6b8d10f56639f77b75a9fe26745b5be7b4d', role: "rowgroup" }, h("div", { key: '8b6b924b1b1d805eb55db646952fa3110fe32236', class: this.getHeaderCssClassMap(), role: "presentation", part: "header" }, h("slot", { key: 'c5636e6a580ff35e0142ed0b250754cde68899bb' }))));
     }
     static get is() { return "br-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -6,20 +6,10 @@ import { Host, h } from "@stencil/core";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 import { TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table-constants";
 /**
- * Subcomponente de célula de cabeçalho de `br-table`, responsável por nomear uma coluna e oferecer controles opcionais de ordenação.
+ * Célula de cabeçalho (`<th>`) da tabela. Use dentro de um `br-table-row` no cabeçalho.
  *
- * ### Papel na composição
+ * Coloque o título da coluna no slot padrão. Para habilitar ordenação, ative `sortable`.
  *
- * - Define o rótulo da coluna com `role="columnheader"`.
- * - Suporta gatilho interativo de ordenação crescente e decrescente (`sortable`), emitindo eventos para reordenação de dados.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro de um `br-table-row` situado no `br-table-header`. O alinhamento horizontal segue a definição da coluna na tabela pai.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
  * @part cell - Wrapper da célula de cabeçalho.
  * @part content - Área de conteúdo da célula de cabeçalho.
  */
@@ -171,7 +161,7 @@ export class TableHeaderCell {
      * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da célula de cabeçalho da tabela.
      */
     render() {
-        return (h(Host, { key: '70667395aa89e642fc0e39ae29b6ed1373bfd109', role: "columnheader" }, h("div", { key: '605af5cae94de537e2100729a291dc57665733d9', class: this.getHeaderCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '793b918ca6f38f67dfb2da1c89a7addfa7e54c6f', class: "br-table-header-cell-content", role: "presentation", part: "content" }, h("div", { key: '69f6df07fc3fe20974b4beafaf025842aae3d8d0', class: "br-table-header-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '90e17f6f9b6b463133f34b561c719b1506b17b1a', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: '9d7e5184bb46bb89fb1a9b1e3a9722eada6a0518', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'f4c10e304309b30b5cc2cbd7fa56d008e8239491', slot: "content" }, this.tooltipContent)))))));
+        return (h(Host, { key: '4ece237da29ff58fc411eb7e26c560dba9f0973a', role: "columnheader" }, h("div", { key: '4eaa6afebe31a0ce4907d4b8acee9f81039a019e', class: this.getHeaderCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '4ded9e1d6c1e2da28c1b2fccfd75a19d757d11d6', class: "br-table-header-cell-content", role: "presentation", part: "content" }, h("div", { key: '773cb97c329204af1076378dba230ce517cda410', class: "br-table-header-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '8cf462e15b66cdb8ea6f04ec0c043f5d63ea0e87', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: 'c4b9f0f3302c954466dee1714afc648f949af6fe', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: '6a082b96f32d324047a565c6eb8a56e4530a39d0', slot: "content" }, this.tooltipContent)))))));
     }
     static get is() { return "br-table-header-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-row/table-row.js

@@ -5,20 +5,10 @@
 import { Host, h } from "@stencil/core";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * Subcomponente de linha de `br-table`, utilizado tanto no cabeçalho quanto no corpo de dados para agrupar uma sequência horizontal de células.
+ * Linha horizontal (`<tr>`) da tabela. Use dentro de `br-table-header` ou `br-table-body`.
  *
- * ### Papel na composição
+ * Use `selected` para indicar que a linha está selecionada.
  *
- * - Representa uma linha de registro (`role="row"`).
- * - Suporta estados de seleção (`selected`), foco e hover coordenados com o pai.
- *
- * ### Regra de uso e relacionamento
- *
- * Declarado dentro de `br-table-header` (quando contiver `br-table-header-cell`) ou dentro de `br-table-body` (quando contiver `br-table-cell`). Não deve ser usado isoladamente.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
  * @part row - Wrapper da linha da tabela.
  */
 export class TableRow {
@@ -81,7 +71,7 @@ export class TableRow {
      * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da linha da tabela.
      */
     render() {
-        return (h(Host, { key: 'c3fd05b1f3636564a6ea438279edcf7c19e44382', role: "row" }, h("div", { key: '3ca87d6118bdeb26749796f4f7ce769aeb5ef1f7', class: this.getRowCssClassMap(), role: "presentation", part: "row" }, h("slot", { key: '5b0b6e541c5efc9b4c7ddc356c53e1531d0c053e' }))));
+        return (h(Host, { key: '1b2246705a8a2017b87e056b6582811d18a0984b', role: "row" }, h("div", { key: '0b740cf446684867c9ce4081466bdc7e3e01bb6f', class: this.getRowCssClassMap(), role: "presentation", part: "row" }, h("slot", { key: 'f98e999efa1f30a2c3c03614d5f7e272ca438452' }))));
     }
     static get is() { return "br-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -11,45 +11,38 @@ import { COLUMN_WIDTH_MAP, COLUMN_WIDTH_SEMANTICS, TABLE_ALIGNMENT, TABLE_ALIGNM
 import { TABLE_TOKENS } from "./table-tokens";
 import { positiveFrValidator, positivePxValidator, resolveTokenValue } from "./table-utils";
 /**
- * O componente `br-table` é o elemento oficial do GovBR-DS para exibição e gerenciamento de dados tabulares estruturados em linhas e colunas, desenvolvido com suporte a CSS Grid, responsividade e alta flexibilidade de composição.
+ * O `br-table` estrutura e exibe conjuntos de dados organizados em linhas e colunas.
  *
- * ### Para que serve
+ * Estruture a tabela usando os subcomponentes `br-table-header`, `br-table-body`, `br-table-row` e `br-table-cell`. Para exibir um indicador de carregamento durante atualizações assíncronas, use a propriedade `loading`.
  *
- * - **Apresentação de conjuntos de dados relacionais:** Organiza registros com múltiplos atributos comparáveis (ex.: relatórios, tabelas de processos, listagens financeiras).
- * - **Recursos interativos avançados:** Suporta ordenação por coluna, seleção simples ou múltipla de linhas, densidades variadas (alta, média, baixa) e paginação integrada com `br-pagination`.
- * - **Acessibilidade WAI-ARIA:** Preserva a semântica de tabela acessível (`role="table"`, `role="columnheader"`, `role="row"`, `role="cell"`) mesmo em leiautes baseados em CSS Grid.
+ * ```html
+ * <br-table>
+ *   <br-table-header slot="header">
+ *     <br-table-row>
+ *       <br-table-header-cell>Nome</br-table-header-cell>
+ *       <br-table-header-cell>Cargo</br-table-header-cell>
+ *     </br-table-row>
+ *   </br-table-header>
+ *   <br-table-body slot="body">
+ *     <br-table-row>
+ *       <br-table-cell>Maria Silva</br-table-cell>
+ *       <br-table-cell>Analista</br-table-cell>
+ *     </br-table-row>
+ *   </br-table-body>
+ * </br-table>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - As informações compartilharem campos e atributos fixos que justifiquem a comparação lado a lado em colunas.
- *   - A pessoa usuária precisar ordenar, filtrar ou selecionar múltiplos registros da lista.
- * - **Evite e prefira outro componente quando:**
- *   - Os itens forem heterogêneos com estruturas visuais distintas (prefira `br-card`).
- *   - Houver apenas um texto linear simples por item (prefira `br-list`).
+ * - Dados bidimensionais com cabeçalhos de coluna e necessidades de ordenação ou comparação.
  *
- * ### Composição e Subcomponentes
+ * ### Quando evitar
  *
- * O ecossistema da Tabela segue a hierarquia semântica modular:
+ * - Listas simples de itens lineares: use `br-list`.
+ * - Agrupamento de informações de um único registro: use `br-card`.
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-table` | **Orquestrador principal.** Gerencia o grid de colunas, ordenação, seleção de linhas e densidade. | Contêiner raiz da tabela. |
- * | `br-table-header` | **Seção de cabeçalho.** Agrupa as linhas de títulos das colunas. | Declarado no slot `header` da tabela. |
- * | `br-table-body` | **Corpo de dados.** Agrupa as linhas de registros de conteúdo. | Declarado no slot `body` (ou padrão) da tabela. |
- * | `br-table-row` | **Linha.** Representa uma linha de cabeçalho ou de registro de dados. | Declarado dentro de `br-table-header` ou `br-table-body`. |
- * | `br-table-header-cell` | **Célula de título.** Célula de cabeçalho com suporte a botão de ordenação. | Declarado dentro de `br-table-row` no cabeçalho. |
- * | `br-table-cell` | **Célula de dados.** Célula de conteúdo individual de uma coluna. | Declarado dentro de `br-table-row` no corpo de dados. |
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/table?tab=designer).
  *
- * ### Como os subcomponentes se relacionam
- *
- * A arquitetura de `br-table` reflete a semântica nativa de tabelas HTML de forma modular:
- * `br-table` → `br-table-header` / `br-table-body` → `br-table-row` → `br-table-header-cell` / `br-table-cell`.
- * O componente pai orquestra o alinhamento das colunas via tokens de Grid, distribuindo automaticamente os estados de seleção e foco para as linhas filhas.
- *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
  * @category Dados, Conteúdo
  * @status stable
  * @Slot header: Área para inclusão do subcomponente br-table-header
@@ -639,7 +632,7 @@ export class Table {
      * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da tabela.
      */
     render() {
-        return (h(Host, { key: 'a58c9c25006857f42da639db4ff06fa1a7ba199b', role: "table", "aria-busy": this.loading ? 'true' : null }, h("div", { key: '32b7107a5f08f8f4d3fc018dfaa9da52765a62db', class: this.getTableCssClassMap(), part: "container" }, this.renderContent(), this.loading ? (h("div", { part: "loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { size: "small", label: "Carregando dados" })))) : null)));
+        return (h(Host, { key: '98c729fdca76ed9a92354b8caf2c46030ea0f1e4', role: "table", "aria-busy": this.loading ? 'true' : null }, h("div", { key: 'b64e8d0e0ce41e2983b7a55fe9c5764df107db2b', class: this.getTableCssClassMap(), part: "container" }, this.renderContent(), this.loading ? (h("div", { part: "loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { size: "small", label: "Carregando dados" })))) : null)));
     }
     static get is() { return "br-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,37 +14,28 @@ const SHAPE_CIRCLE = 'circle';
 const SHAPE_ROUNDED = 'rounded';
 const SHAPE_DEFAULT = 'default';
 /**
- * O componente `br-tag` é o elemento visual compacto do GovBR-DS utilizado para rotular, categorizar, exibir metadados ou aplicar filtros rápidos na interface.
+ * O `br-tag` categoriza, rotula ou destaca informações curtas e metadados.
  *
- * ### Para que serve
+ * Suporta modo estático informativo, modo interativo clicável com `action`, modo com botão de fechar (`closable`) e modo selecionável com `selectable`.
  *
- * - **Categorização e metadados:** Identifica o tipo, categoria ou atributos de um item (ex.: "Educação", "Tecnologia", "Urgente").
- * - **Sinalização de status:** Exibe estados operacionais de processos ou documentos através de cores semânticas e ícones (ex.: "Aprovado", "Pendente", "Cancelado").
- * - **Filtros interativos dispensáveis:** Suporta botão de fechamento (`closable`), permitindo remover filtros dinamicamente.
- * - **Tags de seleção:** Suporta modo interativo selecionável com integração nativa a formulários (`formAssociated`).
+ * ```html
+ * <br-tag>Pendente</br-tag>
+ * <br-tag status="success">Concluído</br-tag>
+ * <br-tag closable>Filtro: Brasília</br-tag>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - Exibir palavras-chave associadas a um conteúdo ou cartão.
- *   - Exibir status sucinto de registros em tabelas (`br-table`) ou cabeçalhos.
- *   - Oferecer filtros aplicados que podem ser removidos com um clique.
- * - **Evite e prefira outro componente quando:**
- *   - O elemento for a ação primária ou um comando executável (prefira `br-button`).
- *   - O texto for extenso e exigir explicações detalhadas (prefira `br-message`).
+ * - Rótulos de estado, tags de categorias ou palavras-chave.
+ * - Filtros aplicados que podem ser removidos individualmente.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-tag` oferece flexibilidade estrutural:
- * - `default`: Slot principal para texto ou conteúdo livre da tag.
- * - `label`: Slot para rótulo customizado.
- * - `icon`: Slot para inserção de ícone auxiliar (`br-icon`).
- * - `close-button`: Slot para customizar o botão de remoção.
- * - `feedback`: Slot para mensagem de validação contextual.
+ * - Ações primárias ou envio de formulário: use `br-button`.
+ * - Contagem numérica pura: use `br-avatar` ou texto de badge.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/tag?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tag?tab=designer).
  *
-
  * @category Conteúdo, Dados
  * @status stable
  * @slot default - Slot para inserir o conteúdo da tag, como rótulo ou ícone.
@@ -513,11 +504,11 @@ export class Tag {
     }
     render() {
         const mainContent = this.renderMainTagContent();
-        return (h(Host, { key: '683f8e3defe93273f120cbc10bf4d7c8557296da' }, this.effectiveSelectable
+        return (h(Host, { key: '920367f2226906a5647e53f9340bccebc8950973' }, this.effectiveSelectable
             ? this.renderInteractionSelectTag()
             : this.effectiveStatus
                 ? this.renderStatusLayout(mainContent)
-                : mainContent, h("div", { key: '17552d24b69dd20c6952135120105ff4cfa890b7', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '4dd3305a2fb8358ae7777d4f8c4025002c362dc6', 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)));
+                : mainContent, h("div", { key: '773bf8dcb94a3c172e9a66298493f4c4a502335d', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '1f20e23d871705afa78914dcd17ce423f29f42b6', 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"; }
@@ -817,7 +808,7 @@ export class Tag {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Variante funcional can\u00F4nica. Aceita `default`, `status`, `action` ou `selectable`.\nValores inv\u00E1lidos s\u00E3o ignorados; nesse caso, os aliases booleanos legados\ncontinuam dispon\u00EDveis para manter a compatibilidade."
+                    "text": "Variante funcional padr\u00E3o. Aceita `default`, `status`, `action` ou `selectable`.\nValores inv\u00E1lidos s\u00E3o ignorados; nesse caso, os aliases booleanos legados\ncontinuam dispon\u00EDveis para manter a compatibilidade."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -10,34 +10,26 @@ import { resolveAllowedPropValue, resolveDensity, resolveIntegerPropValue } from
 import { hasAssignedSlotContent, hasDefaultLightDomContent } from "../../shared/utils/slot";
 import { resolveFormValidator } from "../../shared/utils/validator";
 /**
- * O componente `br-textarea` é o controle oficial do GovBR-DS para entrada de dados textuais em múltiplas linhas, projetado para capturar textos longos, justificativas, descrições ou observações em formulários.
+ * O `br-textarea` captura textos longos em múltiplas linhas em formulários.
  *
- * ### Para que serve
+ * Configure `label`, `placeholder`, `maxlength` e `state` para validação. Use `show-counter` para exibir o contador de caracteres restantes.
  *
- * - **Entrada de texto extenso:** Permite que a pessoa usuária digite parágrafos de texto livre com quebra de linha e rolagem vertical.
- * - **Contador regressivo de caracteres:** Exibe a quantidade de caracteres restantes em tempo real com base no limite máximo (`maxlength`), alertando visualmente quando o limite é atingido.
- * - **Integração com formulários:** É associado nativamente a formulários HTML (`formAssociated`), sincronizando valor, estado de validação e foco acessível.
- * - **Redimensionamento controlado:** Oferece opções de redimensionamento vertical, horizontal ou fixo.
+ * ```html
+ * <br-textarea label="Observações" placeholder="Digite sua mensagem" maxlength="500" show-counter></br-textarea>
+ * ```
  *
- * ### Quando utilizar
+ * Em formulários HTML, o componente integra-se via `ElementInternals`, participando da validação nativa com `required`.
  *
- * - **Utilize quando:**
- *   - A entrada esperada tiver mais de uma frase ou exigir formatação multilinha (comentários, manifestações, relatórios, justificativas).
- *   - Houver restrição estrita de caracteres com necessidade de feedback quantitativo dinâmico.
- * - **Evite e prefira outro componente quando:**
- *   - O dado for curto e couber em uma única linha (como nomes, e-mails, títulos, documentos): prefira `br-input`.
- *   - For necessário um editor rico WYSIWYG com formatação em negrito, tabelas e links.
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Mensagens, comentários, justificativas, descrições ou textos extensos.
  *
- * O `br-textarea` é composto pelo campo e slots de apoio:
- * - `default`: Slot para instruções adicionais ou textos de ajuda.
- * - `feedback`: Slot para mensagens de validação contextual (como `br-message`).
- * - `validation-loading`: Slot para indicador de carregamento durante validações assíncronas.
+ * ### Quando evitar
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/textarea?tab=designer).
+ * - Dados curtos de linha única (nome, CPF, e-mail): use `br-input`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/textarea?tab=designer).
  *
-
  * @category Formulários
  * @status stable
  * @slot default - Slot para texto adicional ou instruções a serem exibidos junto ao textarea.
@@ -420,7 +412,7 @@ export class Textarea {
         const caracteresRestantes = this.effectiveMaxLength - this.currentLength;
         const mostrarLimite = this.currentLength > 0;
         const hasLabel = !!this.label;
-        return (h(Host, { key: '1add4c3bb34ae39c2862a21c110ec81ce38a4d64' }, h("div", { key: '0b52b65d7042c13d4dc5e45a0f0b1e43f49e532e', class: this.getCssClassMap(), part: "container" }, (this.inline ?? this.isInline) ? (h("div", { class: "row" }, h("div", { class: "col-auto pt-half" }, h("label", { part: "label", htmlFor: this.customId }, this.label)), h("div", { class: "col" }, h("textarea", { part: "textarea", ref: this.setNativeTextarea, id: this.customId, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.isDisabled(), required: this.required, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, rows: this.effectiveRows, cols: this.effectiveCols, wrap: this.effectiveWrap, maxLength: this.effectiveMaxLength > 0 ? this.effectiveMaxLength : undefined, minLength: this.effectiveMinLength > 0 ? this.effectiveMinLength : undefined, "aria-describedby": this.getDescribedBy(), "aria-busy": this.isValidating ? 'true' : null, ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), this.renderFeedback(), this.renderValidationLoading(), h("div", { class: "mt-1 text-base", part: "counter" }, this.showCounter && (h("div", null, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax`, part: "counter-text" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax`, part: "counter-text" }, "Limite m\u00E1ximo de ", h("strong", null, this.effectiveMaxLength), " caracteres")))), this.hasDefaultSlot && (h("div", { id: `${this.customId}-slotInfo`, "aria-live": "polite", part: "helper" }, h("slot", null))))))) : (h("div", null, hasLabel ? (h("label", { part: "label", htmlFor: this.customId }, this.label)) : null, h("textarea", { part: "textarea", ref: this.setNativeTextarea, id: this.customId, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.isDisabled(), required: this.required, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, rows: this.effectiveRows, cols: this.effectiveCols, wrap: this.effectiveWrap, maxLength: this.effectiveMaxLength > 0 ? this.effectiveMaxLength : undefined, minLength: this.effectiveMinLength > 0 ? this.effectiveMinLength : undefined, "aria-describedby": this.getDescribedBy(), "aria-busy": this.isValidating ? 'true' : null, ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), this.renderFeedback(), this.renderValidationLoading(), this.showCounter ? (h("div", { part: "counter" }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax`, part: "counter-text" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax`, part: "counter-text" }, "Limite m\u00E1ximo de ", h("strong", null, this.effectiveMaxLength), " caracteres")))) : null, this.hasDefaultSlot ? (h("div", { id: `${this.customId}-slotInfo`, "aria-live": "polite", part: "helper" }, h("slot", null))) : null)))));
+        return (h(Host, { key: '90b44bc0d3f646a162ff47a23edeee58553e9a95' }, h("div", { key: '737b4e60054d523e4004062c1ef72b87ec3da7e3', class: this.getCssClassMap(), part: "container" }, (this.inline ?? this.isInline) ? (h("div", { class: "row" }, h("div", { class: "col-auto pt-half" }, h("label", { part: "label", htmlFor: this.customId }, this.label)), h("div", { class: "col" }, h("textarea", { part: "textarea", ref: this.setNativeTextarea, id: this.customId, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.isDisabled(), required: this.required, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, rows: this.effectiveRows, cols: this.effectiveCols, wrap: this.effectiveWrap, maxLength: this.effectiveMaxLength > 0 ? this.effectiveMaxLength : undefined, minLength: this.effectiveMinLength > 0 ? this.effectiveMinLength : undefined, "aria-describedby": this.getDescribedBy(), "aria-busy": this.isValidating ? 'true' : null, ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), this.renderFeedback(), this.renderValidationLoading(), h("div", { class: "mt-1 text-base", part: "counter" }, this.showCounter && (h("div", null, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax`, part: "counter-text" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax`, part: "counter-text" }, "Limite m\u00E1ximo de ", h("strong", null, this.effectiveMaxLength), " caracteres")))), this.hasDefaultSlot && (h("div", { id: `${this.customId}-slotInfo`, "aria-live": "polite", part: "helper" }, h("slot", null))))))) : (h("div", null, hasLabel ? (h("label", { part: "label", htmlFor: this.customId }, this.label)) : null, h("textarea", { part: "textarea", ref: this.setNativeTextarea, id: this.customId, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.isDisabled(), required: this.required, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, rows: this.effectiveRows, cols: this.effectiveCols, wrap: this.effectiveWrap, maxLength: this.effectiveMaxLength > 0 ? this.effectiveMaxLength : undefined, minLength: this.effectiveMinLength > 0 ? this.effectiveMinLength : undefined, "aria-describedby": this.getDescribedBy(), "aria-busy": this.isValidating ? 'true' : null, ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), this.renderFeedback(), this.renderValidationLoading(), this.showCounter ? (h("div", { part: "counter" }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax`, part: "counter-text" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax`, part: "counter-text" }, "Limite m\u00E1ximo de ", h("strong", null, this.effectiveMaxLength), " caracteres")))) : null, this.hasDefaultSlot ? (h("div", { id: `${this.customId}-slotInfo`, "aria-live": "polite", part: "helper" }, h("slot", null))) : null)))));
     }
     static get is() { return "br-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -705,7 +697,7 @@ export class Textarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado de feedback can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `state`; valores inv\u00E1lidos n\u00E3o aplicam estado."
+                    "text": "Estado de feedback. Quando informado, tem preced\u00EAncia sobre `state`; valores inv\u00E1lidos n\u00E3o aplicam estado."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -40,32 +40,26 @@ const detachVisibilityListener = (tooltip) => {
     }
 };
 /**
- * O componente `br-tooltip` é a sobreposição informativa flutuante do GovBR-DS, desenvolvida para fornecer dicas breves e esclarecimentos contextuais quando o usuário foca ou posiciona o cursor sobre um elemento da interface.
+ * O `br-tooltip` exibe uma dica rápida e contextual quando o usuário foca ou passa o mouse sobre um elemento.
  *
- * ### Para que serve
+ * Coloque o texto da dica em `text` ou no slot padrão, e vincule-o ao elemento acionador através de `target` ou colocando o acionador no slot `trigger`.
  *
- * - **Esclarecimento contextual imediato:** Revela descrições sucintas para botões de ícone, termos técnicos, siglas ou campos que necessitem de auxílio extra.
- * - **Posicionamento automático:** Posiciona o balão informativo em relação ao elemento de acionamento (topo, direita, baixo, esquerda) ajustando-se dinamicamente ao espaço da tela.
- * - **Acessibilidade WAI-ARIA:** Associa o acionador ao balão com `role="tooltip"` e `aria-describedby`, exibindo-se automaticamente no foco por teclado e fechando com a tecla Escape.
+ * ```html
+ * <br-button id="btn-ajuda" shape="circle" aria-label="Ajuda">?</br-button>
+ * <br-tooltip target="#btn-ajuda" text="Clique para obter informações"></br-tooltip>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - Fornecer o rótulo descritivo de um botão que contenha apenas ícone.
- *   - Explicar uma sigla ou termo abreviado na interface.
- * - **Evite e prefira outro componente quando:**
- *   - O conteúdo for extenso, contiver botões interativos ou links navegáveis (prefira `br-dropdown`, `br-modal` ou texto inline fixo, pois tooltips desaparecem ao mover o ponteiro).
- *   - A informação for indispensável para a conclusão de uma tarefa crítica (ela deve estar sempre visível na tela).
+ * - Esclarecer o significado de botões que usam apenas ícones ou rótulos abreviados.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-tooltip` é composto por acionador e conteúdo:
- * - `trigger`: Slot obrigatório onde a aplicação declara o elemento de controle gatilho (ex.: um `br-button` de ícone).
- * - `content`: Slot onde é inserido o texto ou balão de conteúdo exibido pelo tooltip.
+ * - Informações essenciais que todos os usuários precisam ler imediatamente: exiba como texto visível na página.
+ * - Conteúdos longos com links clicáveis: use `br-message` ou diálogo.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/tooltip?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tooltip?tab=designer).
  *
-
  * @category Feedback, Sobreposições
  * @status stable
  * @slot trigger - Slot para o elemento que aciona a exibição do tooltip.
@@ -683,7 +677,7 @@ export class Tooltip {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'f934d22c41be62e32b3727d66187bc4ca5162786' }, h("div", { key: 'c449fbcd7c8e98b1eb1f29024fd20ec3c1319cce', id: this.customId, class: this.getCssClassMap(), part: "container" }, h("div", { key: '7e076c4a8d068b48e342afef9f3500f0ad7fda19', class: this.getTriggerCssClassMap(), ref: (el) => (this.triggerElement = el), "aria-describedby": `${this.customId}-content`, "aria-controls": `${this.customId}-content`, tabindex: this.externalTriggerElement !== null || this.hasFocusableTrigger ? -1 : 0, part: "trigger" }, h("slot", { key: 'b1deaf5436de0805ef789f3fd187d0fbc76e2d91', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'bc742361771544e0ab2d4fbfa1867c6a6a8b4ebb', id: `${this.customId}-content`, class: this.getContentCssClassMap(), ref: (el) => (this.contentElement = el), role: this.effectiveType === 'popover' ? 'dialog' : 'tooltip', "aria-label": this.effectiveType === 'popover' ? this.ariaLabel || this.getAccessibilityLabel() : undefined, tabindex: "-1", part: "content" }, h("span", { key: '52b689441280bdc16bb3ead862774a6f6d153a27', class: "sr-only" }, this.getAccessibilityLabel()), h("slot", { key: '5f32250e50b51f68e770f603bd9826e3a3b7898e', name: "content" }), this.effectiveType === 'popover' && (h("br-button", { key: '3a08e7bdbfb2de82450ce15716b4a0189b796d9c', class: "close", shape: "circle", density: "small", type: "button", onClick: this.hideContent, "prop:ariaLabel": "Fechar popover" }, h("br-icon", { key: '8f2e3670d45b272e68687da2c7aff3b82c3366d6', iconName: "fa6-solid:xmark", width: "16", height: "16" }))), h("div", { key: 'f2de0edb62e41aa945157c7385682882421948a5', class: this.getArrowCssClassMap(), ref: (el) => (this.arrowElement = el), part: "arrow" })))));
+        return (h(Host, { key: '0297e9290fba02f1ffb37f0f19841e65c04c4f43' }, h("div", { key: '11d7cdab421eae7a1ceb07832e6922af23ae146a', id: this.customId, class: this.getCssClassMap(), part: "container" }, h("div", { key: 'f14b554222d9cbf5c0088db5f6f632e6bfe7dd97', class: this.getTriggerCssClassMap(), ref: (el) => (this.triggerElement = el), "aria-describedby": `${this.customId}-content`, "aria-controls": `${this.customId}-content`, tabindex: this.externalTriggerElement !== null || this.hasFocusableTrigger ? -1 : 0, part: "trigger" }, h("slot", { key: 'c1a5efec3a1c6dc7744a5b53c0a8a025dba8d616', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '83c5317be6ba8093bd276f7fb235856ed71afbda', id: `${this.customId}-content`, class: this.getContentCssClassMap(), ref: (el) => (this.contentElement = el), role: this.effectiveType === 'popover' ? 'dialog' : 'tooltip', "aria-label": this.effectiveType === 'popover' ? this.ariaLabel || this.getAccessibilityLabel() : undefined, tabindex: "-1", part: "content" }, h("span", { key: 'e14f457e49233fde38ec09e23314ad5f42bcdc41', class: "sr-only" }, this.getAccessibilityLabel()), h("slot", { key: 'fe8dfb523ee3c12a42bf2bd9553fafd27572724b', name: "content" }), this.effectiveType === 'popover' && (h("br-button", { key: '659f619515e3ab003f4f94ae02d84060b0583574', class: "close", shape: "circle", density: "small", type: "button", onClick: this.hideContent, "prop:ariaLabel": "Fechar popover" }, h("br-icon", { key: 'c0190cf4d9e52a3a8955e56567a2a121c905c2f7', iconName: "fa6-solid:xmark", width: "16", height: "16" }))), h("div", { key: '3b158c825c4999e3241de6cad440e71a7d7b993c', class: this.getArrowCssClassMap(), ref: (el) => (this.arrowElement = el), part: "arrow" })))));
     }
     static get is() { return "br-tooltip"; }
     static get encapsulation() { return "shadow"; }