@govbr-ds/webcomponents 2.4.0 → 2.5.0

package/dist/collection/components/dropdown/dropdown.js

@@ -11,33 +11,34 @@ import { getScrollBehavior } from "../../shared/utils/motion";
 import { findComposedOwner } from "../../shared/utils/ownership";
 import { resolveAllowedPropValue } from "../../shared/utils/props";
 /**
- * O componente `br-dropdown` é o painel flutuante de sobreposição do GovBR-DS, ativado por um controle gatilho para apresentar listas contextuais de comandos, opções ou conteúdos complementares.
+ * O `br-dropdown` abre um painel flutuante a partir de um botão, com ações ou conteúdo complementar, como um menu "Mais opções".
  *
- * ### Para que serve
+ * Coloque o botão no slot `trigger` e o conteúdo no slot `target`:
  *
- * - **Menus de contexto e ações:** Agrupa múltiplas ações secundárias ou suplementares que não precisam ficar expostas permanentemente na interface (ex.: menu "Mais opções", "Exportar", "Filtrar por").
- * - **Posicionamento flutuante inteligente:** Gerencia a exibição da superfície suspensa sobre o conteúdo da página, garantindo contraste, elevação e fechamento ao clicar fora (`click outside`) ou pressionar a tecla Escape.
- * - **Comportamento acessível:** Associa o elemento acionador ao painel de destino via atributos WAI-ARIA (`aria-expanded`, `aria-haspopup`).
+ * ```html
+ * <br-dropdown>
+ *   <br-button slot="trigger" emphasis="tertiary">Mais opções</br-button>
+ *   <br-list slot="target">
+ *     <br-item>Exportar</br-item>
+ *     <br-item>Imprimir</br-item>
+ *   </br-list>
+ * </br-dropdown>
+ * ```
  *
- * ### Quando utilizar
+ * O painel fecha com Escape ou com um clique fora dele (desative com `prevent-auto-dismiss`). A posição é definida por `placement`, por exemplo `bottom-start` ou `top-end`. Para acompanhar a abertura e o fechamento, ouça `brDropdownOpenChange`.
  *
- * - **Utilize quando:**
- *   - O espaço na barra de ferramentas ou cabeçalho for limitado e houver várias ações pontuais a serem oferecidas.
- *   - For necessário apresentar uma lista suspensa de comandos acionáveis.
- * - **Evite e prefira outro componente quando:**
- *   - O objetivo for permitir a seleção de valor para submissão em formulário (prefira `br-select`).
- *   - O conteúdo for a estrutura principal de navegação do site (prefira `br-menu`).
- *   - A mensagem for uma notificação assíncrona ou alerta (prefira `br-message` ou `br-notification`).
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Várias ações secundárias quando há pouco espaço na tela.
  *
- * O `br-dropdown` é composto por duas regiões fundamentais:
- * - `trigger`: Slot obrigatório onde a aplicação declara o botão ou link de acionamento (como um `br-button`).
- * - `target`: Slot onde a aplicação declara o painel, lista de itens ou conteúdo flutuante exibido ao abrir o dropdown.
+ * ### 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/dropdown?tab=designer).
+ * - Escolher um valor de formulário: use `br-select`.
+ * - Navegação principal do site: use `br-menu`.
+ * - Avisos: use `br-message` ou `br-notification`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/dropdown?tab=designer).
  *
-
  * @category Ações, Sobreposições
  * @status stable
  * @slot trigger - Slot para o elemento que aciona a abertura do dropdown.
@@ -682,7 +683,7 @@ export class Dropdown {
         }
     }
     render() {
-        return (h(Host, { key: '306aeab7e1c86dec82b657dc8c83819410e155ac', "is-open": this.isOpen, placement: this.effectivePlacement, "prevent-auto-dismiss": this.preventAutoDismiss, disabled: this.disabled, "arrow-position": this.effectiveArrowPosition }, h("div", { key: 'ee8143f80653848dd7d906ac2ddc9f68fa22c12d', class: this.getCssClassMap(), id: this.customId }, h("div", { key: '2810078788ecbfbe797bad9f46799072fc0ff105', id: "trigger", part: "trigger", role: "group", onClick: this.disabled ? null : this.toggle, onKeyDown: (e) => (this.disabled ? null : this.triggerKeydownHandler(e)) }, this.showArrow && this.effectiveArrowPosition === 'left' ? (h("br-icon", { iconName: this.isOpen ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down', "aria-hidden": "true", part: "trigger-arrow", width: "16", height: "16" })) : null, h("slot", { key: 'c2873fc62e4e2407dbbbc4b347d9aafea80458cf', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), this.showArrow && this.effectiveArrowPosition === 'right' ? (h("br-icon", { iconName: this.isOpen ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down', "aria-hidden": "true", part: "trigger-arrow", width: "16", height: "16" })) : null), h("div", { key: '61d81296b1254a25d435b5a3bbb9c8d1fd79ed6f', id: "target", part: "target", "aria-hidden": this.isOpen ? 'false' : 'true' }, h("slot", { key: 'fa0cf2c941124bb3697315c60d88fbc53ded4b30', name: "target" })))));
+        return (h(Host, { key: '2698c7b809ba3b6b6f2c335120ce881f1fcd8074', "is-open": this.isOpen, placement: this.effectivePlacement, "prevent-auto-dismiss": this.preventAutoDismiss, disabled: this.disabled, "arrow-position": this.effectiveArrowPosition }, h("div", { key: '1d45b636f5afbe0d7c688c86f68d78f373f2f976', class: this.getCssClassMap(), id: this.customId }, h("div", { key: '35296882a111b090286fb03df41d14b59595d4e6', id: "trigger", part: "trigger", role: "group", onClick: this.disabled ? null : this.toggle, onKeyDown: (e) => (this.disabled ? null : this.triggerKeydownHandler(e)) }, this.showArrow && this.effectiveArrowPosition === 'left' ? (h("br-icon", { iconName: this.isOpen ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down', "aria-hidden": "true", part: "trigger-arrow", width: "16", height: "16" })) : null, h("slot", { key: '5c3328afd3ae5a5d1b420c17d5d0fc87f2aaf8bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), this.showArrow && this.effectiveArrowPosition === 'right' ? (h("br-icon", { iconName: this.isOpen ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down', "aria-hidden": "true", part: "trigger-arrow", width: "16", height: "16" })) : null), h("div", { key: '09caf7f63963aea11d8731bb4c11512ad0044c14', id: "target", part: "target", "aria-hidden": this.isOpen ? 'false' : 'true' }, h("slot", { key: '16a32487778e68c3f06882e391cf1646a92e691d', name: "target" })))));
     }
     static get is() { return "br-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -970,7 +971,7 @@ export class Dropdown {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando o estado aberto muda."
+                    "text": "Evento emitido quando o estado aberto muda."
                 },
                 "complexType": {
                     "original": "DropdownOpenChangeDetail",

package/dist/collection/components/footer/footer-category/footer-category.js

@@ -5,23 +5,10 @@
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * O componente `br-footer-category` é o subcomponente do GovBR-DS que agrupa links de rodapé por tema sob um título estruturado.
+ * Grupo de links do mapa do site no `br-footer`. O título vem de `label` e os links são `br-footer-item`.
  *
- * ### Para que serve
+ * Em telas pequenas, a categoria vira uma seção que abre e fecha.
  *
- * - **Organização temática:** Divide os links de apoio em blocos temáticos claros.
- * - **Colapso responsivo:** Funciona como seção que pode ser expandida ou recolhida no layout mobile, otimizando o espaço da tela.
- *
- * ### Papel na composição
- *
- * Atua como agrupador intermediário entre o `br-footer` e os itens filhos individuais `br-footer-item`.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser inserido dentro do `br-footer`.
- * - Acomoda instâncias de `br-footer-item` representando cada link pertencente àquela categoria.
- *
-
  * @slot default - Slot para os itens da categoria no rodapé, utilizando br-footer-item.
  */
 export class FooterCategory {
@@ -109,9 +96,9 @@ export class FooterCategory {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: 'd9779393d2bb90f10aad3e6b9fbeaadff736ab0e', class: this.getRootClassMap() }, h("br-list", { key: 'c24b6c6f07bd113392b0fcd2beff4ec1e26a4554', "list-role": "group", id: this.customId, class: this.getCssClassMap(), "hide-header-divider": this.isDesktop ? true : null, accordion: !this.isDesktop ? this.accordionGroup : null }, this.label &&
+        return (h(Host, { key: 'f7608be824825d9e32fb159360ab669e2c6c21cc', class: this.getRootClassMap() }, h("br-list", { key: '75e4a3235d677ba831e42f2031c95dc32aa53098', "list-role": "group", id: this.customId, class: this.getCssClassMap(), "hide-header-divider": this.isDesktop ? true : null, accordion: !this.isDesktop ? this.accordionGroup : null }, this.label &&
             this.label.trim() !== '' &&
-            (this.isDesktop ? (h("br-item", null, h("div", { class: "content text-bold text-down-01 text-uppercase" }, this.label))) : (h("div", { slot: "header", class: "content text-bold text-down-01 text-uppercase" }, this.label))), h("slot", { key: 'c1ced28867f5a090e0ccfa042896ab50bdaa44d5' }), !this.isDesktop && h("br-divider", { key: 'ee3614e07bdd61fe806736216b73bf01dde32910' }))));
+            (this.isDesktop ? (h("br-item", null, h("div", { class: "content text-bold text-down-01 text-uppercase" }, this.label))) : (h("div", { slot: "header", class: "content text-bold text-down-01 text-uppercase" }, this.label))), h("slot", { key: '3b7f7d9135d91df6956ae597129f8b86a431c79d' }), !this.isDesktop && h("br-divider", { key: 'a56b25371f2d2a11fe86daaea2a0eefc5e3abf0e' }))));
     }
     static get is() { return "br-footer-category"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-item/footer-item.js

@@ -6,23 +6,10 @@ import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * O componente `br-footer-item` é o subcomponente folha do GovBR-DS que renderiza um link de navegação individual dentro de uma categoria do rodapé.
+ * Um link do mapa do site, dentro de um `br-footer-category`. Informe o destino em `href` e o texto no conteúdo.
  *
- * ### Para que serve
+ * Em SPA, use `navigation-mode="event"` e trate o evento `brNavigate`.
  *
- * - **Acesso direto a links:** Conduz a pessoa usuária a páginas de serviços, transparência ou seções institucionais.
- * - **Estilo padronizado:** Garante tipografia, espaçamento e estados acessíveis no rodapé.
- *
- * ### Papel na composição
- *
- * Atua como item de link final na hierarquia de rodapé.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser utilizado exclusivamente dentro de um componente `br-footer-category`.
- * - Não deve ser declarado de forma isolada fora de uma categoria de rodapé.
- *
-
  * @slot default - Slot para o conteúdo do item no rodapé, incluindo texto ou componentes de roteamento para SPAs.
  */
 export class FooterItem {
@@ -60,7 +47,7 @@ export class FooterItem {
      * @returns JSX do componente
      */
     render() {
-        return (h(Host, { key: 'a5c45b93c04dd890962afea152680fa2da41d26b' }, h("br-item", { key: '7e53a57000e18e21f421596094a26c7162e3c616', id: this.customId, href: this.href, navigationMode: this.effectiveNavigationMode, class: this.getCssClassMap() }, h("slot", { key: '3359078a393a07731fe2334a8eb24f93d016a366' }))));
+        return (h(Host, { key: '2f8a2cabc5b79343e7b78d63c17cae87856ff1ed' }, h("br-item", { key: '4ff04e5f23ea323c6a2c4e5329f17a3dfee18242', id: this.customId, href: this.href, navigationMode: this.effectiveNavigationMode, class: this.getCssClassMap() }, h("slot", { key: 'ba0bb4c41502479a69a0a6451df2cfd31d241b37' }))));
     }
     static get is() { return "br-footer-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-legal/footer-legal.js

@@ -5,22 +5,8 @@
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * O componente `br-footer-legal` é o subcomponente do GovBR-DS que apresenta as informações de licenciamento aberto de conteúdo (como Creative Commons) e termos legais obrigatórios.
+ * Informações legais do `br-footer`, como licença de uso e direitos autorais. Use no slot `legal`.
  *
- * ### Para que serve
- *
- * - **Transparência jurídica:** Comunica a licença de uso dos dados e conteúdos do portal público.
- * - **Fechamento de conformidade:** Atende às normas governamentais de publicação de páginas federais.
- *
- * ### Papel na composição
- *
- * Atua como elemento informativo legal no rodapé.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser posicionado na área base de menções legais do `br-footer`.
- *
-
  * @slot default - Slot para informações legais no rodapé, como direitos autorais ou termos de uso.
  *
  * @part container - Wrapper principal do footer-legal.
@@ -47,7 +33,7 @@ export class FooterLegal {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: '3267a7da8dde980e25f0d19006f2143d8ccd1438' }, h("div", { key: '10a5f0e7280f222e9245e693aa136d2b7cd4f5b8', id: this.customId, class: this.getCssClassMap(), part: "container" }, h("slot", { key: '08ab86a4188b6f85d30a1831fac8a0c99557e02a' }))));
+        return (h(Host, { key: 'f79b16d145747204ede048463154754c9df45811' }, h("div", { key: 'b21b281bf7d4aab0636cfd0ce976f385d5707ca0', id: this.customId, class: this.getCssClassMap(), part: "container" }, h("slot", { key: '5b42519c1b9ca0d3ebe5af0585ba49a26a975674' }))));
     }
     static get is() { return "br-footer-legal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-logo/footer-logo.js

@@ -7,23 +7,10 @@ import { generateUniqueId } from "../../../shared/utils/id";
 import { handleNavigationClick } from "../../../shared/utils/navigation";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * O componente `br-footer-logo` é o subcomponente do GovBR-DS responsável por renderizar a marca oficial do órgão ou a marca unificada do Governo Federal no rodapé.
+ * Logotipo do `br-footer`. Use no slot `logo` para a marca do órgão, ou com `partner` no slot `partner-logo` para parceiros.
  *
- * ### Para que serve
+ * Informe a imagem em `src` e o texto alternativo em `description`. Com `href`, a logo vira link.
  *
- * - **Assinatura institucional:** Reforça a autenticidade governamental no fechamento da página.
- * - **Link oficial:** Permite redirecionar a pessoa usuária para o portal principal do Governo Federal ou do órgão.
- *
- * ### Papel na composição
- *
- * Atua como elemento de identidade institucional no rodapé.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser inserido na área ou slot de logotipo do `br-footer`.
- * - Não deve ser utilizado fora do ecossistema de rodapé.
- *
-
  * @part container - Wrapper principal do footer-logo.
  */
 export class FooterLogo {
@@ -119,7 +106,7 @@ export class FooterLogo {
      * @returns JSX que representa o componente.
      */
     render() {
-        return (h(Host, { key: '257a5947d1d7634605303cfe5bd8829293edc929', class: this.getRootCssClassMap() }, h("div", { key: 'c51dac7effd40fb7c8a384756db2259690d989a6', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (h("a", { href: this.href, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.createImageElement())) : (this.createImageElement()))));
+        return (h(Host, { key: '0aadb1fe1160bed84f847c6abfa4ba215276d697', class: this.getRootCssClassMap() }, h("div", { key: 'bdc5575bc048b4327d8018151a5bc04f685fcc79', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (h("a", { href: this.href, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.createImageElement())) : (this.createImageElement()))));
     }
     static get is() { return "br-footer-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-social/footer-social.js

@@ -7,22 +7,10 @@ import { generateUniqueId } from "../../../shared/utils/id";
 import { handleNavigationClick } from "../../../shared/utils/navigation";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * O componente `br-footer-social` é o subcomponente do GovBR-DS que agrupa e renderiza atalhos e ícones para os canais oficiais de redes sociais da organização pública.
+ * Link para uma rede social no `br-footer`. Use no slot `social-network`.
  *
- * ### Para que serve
+ * Informe em `icon` o nome do ícone de marca, como `instagram` ou `youtube`; em `description`, o nome da rede (usado como texto acessível); e em `href`, o endereço. Para outro ícone, use o slot `icon`.
  *
- * - **Canais oficiais:** Facilita o acesso do cidadão às mídias sociais e de comunicação do órgão.
- * - **Acessibilidade nos atalhos:** Fornece rótulos acessíveis e abertura segura de links externos.
- *
- * ### Papel na composição
- *
- * Atua como bloco de engajamento social no rodapé.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser inserido na área ou slot destinado a redes sociais do `br-footer`.
- *
-
  * @slot icon - Ícone personalizado. Quando preenchido, substitui o ícone definido por `icon`.
  */
 export class FooterSocial {
@@ -81,7 +69,7 @@ export class FooterSocial {
      */
     render() {
         const socialDescription = this.description?.trim() || 'Rede social';
-        return (h("a", { key: 'a23709345cd82af5de3dea1b1bebf842d75ad4e4', class: this.getCssClassMap(), id: this.customId, href: this.href ?? undefined, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, "aria-label": socialDescription, onClick: this.handleClick }, h("span", { key: 'bec889f2e873ab88ab396b04a4c91e72b8fc54af', class: "sr-only" }, socialDescription), h("slot", { key: '4d9a39e0f91909e99dc1bae25a402ccb93224b1f', name: "icon" }, h("br-icon", { key: 'bbd23f5a25f65aa8f128f555ce11f75a44082126', iconName: `fa-brands:${this.icon}`, width: "16", height: "16", "aria-hidden": "true" }))));
+        return (h("a", { key: 'fc0cd874f82bff116192d35fab67f85b43c6d376', class: this.getCssClassMap(), id: this.customId, href: this.href ?? undefined, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, "aria-label": socialDescription, onClick: this.handleClick }, h("span", { key: '0e3a12b96534a2a4b7baee399a366a1ad129f886', class: "sr-only" }, socialDescription), h("slot", { key: 'a45c2a30b2682750dc636dcbccda7b2dee6ae0d3', name: "icon" }, h("br-icon", { key: '4d391c95a4833e0a327d8509d50ac1889d778ae6', iconName: `fa-brands:${this.icon}`, width: "16", height: "16", "aria-hidden": "true" }))));
     }
     static get is() { return "br-footer-social"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js

@@ -7,41 +7,37 @@ import { generateUniqueId } from "../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../shared/utils/props";
 import { hasNamedLightDomSlot } from "../../shared/utils/slot";
 /**
- * O componente `br-footer` é o orquestrador completo de rodapé institucional do GovBR-DS. Fornece o fechamento estrutural da página, centralizando links de navegação categorizados, canais de redes sociais, menção legal de licenciamento aberto e a marca do Governo Federal.
+ * O `br-footer` é o rodapé da página: logotipo, mapa do site, redes sociais, parceiros e informações legais.
  *
- * ### Para que serve
+ * ### Como montar
  *
- * - **Fechamento e navegação secundária:** Agrupa em categorias os links úteis de apoio, mapas do site e serviços da entidade pública.
- * - **Conformidade legal e transparência:** Apresenta a nota de licenciamento de conteúdo (ex.: Creative Commons) e termos legais obrigatórios.
- * - **Redes sociais institucionais:** Exibe links oficiais de comunicação pública com a sociedade.
- * - **Responsividade integrada:** Converte categorias de links em painéis expansíveis (sanfona) automaticamente no modo mobile.
+ * | Área | Onde colocar |
+ * | --- | --- |
+ * | Logotipo | `br-footer-logo` no slot `logo` |
+ * | Mapa do site | `br-footer-category` com `br-footer-item`, no conteúdo do footer |
+ * | Redes sociais | `br-footer-social` no slot `social-network` |
+ * | Parceiros | `br-footer-logo partner` no slot `partner-logo` |
+ * | Informações legais | `br-footer-legal` no slot `legal` |
  *
- * ### Quando utilizar
+ * ```html
+ * <br-footer social-network-title="Redes sociais">
+ *   <br-footer-logo slot="logo" src="/logo.svg" description="Nome do órgão" href="/"></br-footer-logo>
  *
- * - **Utilize quando:**
- *   - Finalizar a estrutura da página em portais e sistemas governamentais alinhados ao padrão GovBR-DS.
- *   - Oferecer navegação complementar, canais sociais e declarações de direitos autorais.
- * - **Evite e prefira outro componente quando:**
- *   - A interface for um diálogo modal ou painel isolado que não representa uma página completa do portal.
+ *   <br-footer-category label="Serviços">
+ *     <br-footer-item href="/servicos/emitir">Emitir documento</br-footer-item>
+ *     <br-footer-item href="/servicos/consultar">Consultar processo</br-footer-item>
+ *   </br-footer-category>
  *
- * ### Composição e Subcomponentes
+ *   <br-footer-social slot="social-network" icon="instagram" description="Instagram" href="https://instagram.com/orgao" target="_blank"></br-footer-social>
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-footer` | **Orquestrador principal.** Gerencia a distribuição visual em colunas/linhas e o comportamento sanfona em telas menores. | Deve ser declarado como elemento de rodapé ao final da página. |
- * | `br-footer-category` | **Categoria de links.** Agrupa links temáticos sob um título expansível. | Deve ser inserido no contêiner de categorias do `br-footer`. |
- * | `br-footer-item` | **Item de link.** Link individual dentro de uma categoria de rodapé. | Deve ser utilizado dentro de um `br-footer-category`. |
- * | `br-footer-logo` | **Logotipo.** Exibe a logomarca do órgão ou do Governo Federal. | Posicionado na área designada de logotipo do `br-footer`. |
- * | `br-footer-social` | **Redes sociais.** Reúne links e ícones para canais sociais oficiais. | Posicionado no slot ou área de mídias sociais do `br-footer`. |
- * | `br-footer-legal` | **Texto legal.** Exibe termos de licenciamento aberto e direitos autorais. | Posicionado na base legal do `br-footer`. |
+ *   <br-footer-legal slot="legal">Texto destinado a exibir informações sobre o licenciamento.</br-footer-legal>
+ * </br-footer>
+ * ```
  *
- * ### Como os subcomponentes se relacionam
+ * Em telas pequenas, as categorias viram seções que abrem e fecham. O tema padrão é escuro; use `theme="light"` para o claro.
  *
- * O `br-footer` atua como contêiner estrutural orquestrador. Ele organiza as categorias (`br-footer-category`) em colunas no desktop e alterna para comportamento de acordeão no mobile. Os itens (`br-footer-item`) herdam o contexto da categoria correspondente, enquanto as áreas de logotipo, redes sociais e notas legais completam o fechamento padronizado.
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/footer?tab=designer).
  *
- * 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/footer?tab=designer).
- *
-
  * @category Estrutura, Navegação
  * @status stable
  * @slot logo - Slot para o logo do rodapé, utilizando o componente br-logo.
@@ -132,9 +128,9 @@ export class Footer {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: 'e921c6bcb507a9923927c1419cff6a65d450a23b' }, h("footer", { key: 'c6b1031b88586aa5da1eeb32c5bd62162620c6af', id: this.customId, class: this.getCssClassMap() }, h("div", { key: '5f0c032940e48039c1a8f43f31c7936a67854529', class: this.effectiveLayoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("slot", { key: '3a89c544b2ec11091c0ba73b47e80484be346165', name: "logo" }), h("div", { key: 'f4d512262b8c90155abb3c767ea7d05e909777ee', class: "site-map", part: "site-map" }, h("slot", { key: '6748c20f1534c1833f7cb111a3cee111cb097ce3' })), (this.hasSocialNetwork ||
+        return (h(Host, { key: '22cc81b8b2f64efd6fff08de7b8d052c0c6635ca' }, h("footer", { key: '0d58766fd7f1157b330667aae8261e6f15161e0a', id: this.customId, class: this.getCssClassMap() }, h("div", { key: '6aa7b3de49ae74a7d629ba07cd2d8575d5de0d41', class: this.effectiveLayoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("slot", { key: 'b6a266fa78fb14403f4dcc27f763319333a7f426', name: "logo" }), h("div", { key: '9f522f39b4bc35983625fbf60cbaa5f839ac6f71', class: "site-map", part: "site-map" }, h("slot", { key: '52d9d673f47feff8995a4c5d7b00868a7cdfa22d' })), (this.hasSocialNetwork ||
             this.hasPartnerLogo ||
-            (this.socialNetworkTitle && this.socialNetworkTitle.trim() !== '')) && (h("div", { key: 'aadf99e1e8959d85a24de9355e4cfb8d18afdbff', class: "social-and-partners" }, (this.hasSocialNetwork || (this.socialNetworkTitle && this.socialNetworkTitle.trim() !== '')) && (h("div", { key: 'd81fa7774019d1226ef3d4d4a81cd24ce03d566e', class: "social-network" }, this.socialNetworkTitle && this.socialNetworkTitle.trim() !== '' && (h("p", { key: 'b9195f94427ce0b1896be89124d54e94ec81d865', class: "social-network-title" }, this.socialNetworkTitle)), h("slot", { key: 'c2235b50682af00e3e3f3f8c3693398ae7c8ad8d', name: "social-network", onSlotchange: this.handleSlotChange }))), this.hasPartnerLogo && (h("div", { key: 'b9673ee1cac8fe0f6203fac0a965d15f7c47ea84', class: "partners text-right" }, h("slot", { key: '9ef0ba845733f8a1500d71b0be280633252a4e19', name: "partner-logo", onSlotchange: this.handleSlotChange })))))), this.hasLegal && h("br-divider", { key: '851be0894ec2e9a7b7965756dc76f9fd0a381133' }), this.hasLegal && (h("div", { key: 'ce3fcc97b4e752733d5c29589f0972a57068d127', class: this.effectiveLayoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("slot", { key: '09f7f5cc8898b43ac03ff304a92952da7ab8139a', name: "legal", onSlotchange: this.handleSlotChange }))))));
+            (this.socialNetworkTitle && this.socialNetworkTitle.trim() !== '')) && (h("div", { key: '4ab61f1edb292151a24207313cfd288293694c50', class: "social-and-partners" }, (this.hasSocialNetwork || (this.socialNetworkTitle && this.socialNetworkTitle.trim() !== '')) && (h("div", { key: '11b72702d2133cacc118f448f0bfacb0c8971655', class: "social-network" }, this.socialNetworkTitle && this.socialNetworkTitle.trim() !== '' && (h("p", { key: '5ca84b8391de40fd8a2f33636df5dd265b7e887b', class: "social-network-title" }, this.socialNetworkTitle)), h("slot", { key: '34e5d0fb41b5355c5196d5f3bd47d0ad8a2144e6', name: "social-network", onSlotchange: this.handleSlotChange }))), this.hasPartnerLogo && (h("div", { key: '965df2c76cef2ecc79efb00bfe09f79c94fc1dcb', class: "partners text-right" }, h("slot", { key: '3e6e896a125068ee05626dd98d73be234cb5d4ee', name: "partner-logo", onSlotchange: this.handleSlotChange })))))), this.hasLegal && h("br-divider", { key: 'cb9f544d8753d85f7a0afda8d3b6a1a56ce69c7d' }), this.hasLegal && (h("div", { key: '82da21d87ae2628b92233cfff864d420f7b18b96', class: this.effectiveLayoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("slot", { key: '77748ca05feb9659868042565e837b6a472a43a9', name: "legal", onSlotchange: this.handleSlotChange }))))));
     }
     static get is() { return "br-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -219,7 +215,7 @@ export class Footer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Esquema de cor can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `theme`."
+                    "text": "Esquema de cor padr\u00E3o. Quando informado, tem preced\u00EAncia sobre `theme`."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -8,23 +8,19 @@ import { generateUniqueId } from "../../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 import { isCompactHeaderWithoutBrand } from "../header-context";
 /**
- * O componente `br-header-function` é o subcomponente do GovBR-DS que representa uma ação funcional ou utilitária rápida no cabeçalho (como alto contraste, atalhos de acessibilidade, suporte ou configurações).
+ * Atalho do `br-header`, como contraste ou ajuda, dentro de um `br-header-list` no slot `functions`.
  *
- * ### Para que serve
+ * Coloque o ícone no slot `icon` e o nome no conteúdo:
  *
- * - **Ações utilitárias rápidas:** Permite disparar funcionalidades auxiliares com ícone e rótulo sem sair do fluxo da página.
- * - **Feedback interativo:** Oferece estados visuais consistentes de foco, hover e ativação.
+ * ```html
+ * <br-header-function href="/ajuda">
+ *   <br-icon slot="icon" src="/icones/ajuda.svg"></br-icon>
+ *   Ajuda
+ * </br-header-function>
+ * ```
  *
- * ### Papel na composição
+ * Em telas grandes, aparece como botão de ícone, e o nome é usado como texto acessível. Em telas menores, aparece com ícone e nome dentro do menu da lista.
  *
- * Atua como controle interativo de utilidade dentro do cabeçalho.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser utilizado dentro de um `br-header-list` posicionado no slot `functions` do `br-header`.
- * - Não deve ser utilizado como botão genérico de formulário ou ação primária de conteúdo (para esses casos, utilize `br-button`).
- *
-
  * @slot default - Slot para o nome ou rótulo da funcionalidade.
  * @slot icon - Slot para ícone que representa a funcionalidade.
  */
@@ -163,7 +159,7 @@ export class HeaderFunction {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: '0c89f84acd3165dfac684892532f6d9896279f5c' }, BreakpointObserver.getBreakpoints('above', BREAKPOINTS.MEDIUM).includes(this.currentBreakpoint) &&
+        return (h(Host, { key: 'df733368aa6918a19bab393067717181dbbee390' }, BreakpointObserver.getBreakpoints('above', BREAKPOINTS.MEDIUM).includes(this.currentBreakpoint) &&
             !this.isShrunk
             ? this.renderFunctionButton()
             : null, BreakpointObserver.getBreakpoints('until', BREAKPOINTS.MEDIUM).includes(this.currentBreakpoint) ||

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

@@ -7,23 +7,10 @@ import { generateUniqueId } from "../../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 import { isCompactHeaderWithoutBrand } from "../header-context";
 /**
- * O componente `br-header-link` é o subcomponente de navegação do GovBR-DS que representa um atalho ou hiperlink de navegação institucional no cabeçalho.
+ * Link do `br-header`, dentro de um `br-header-list` no slot `links`. Informe o destino em `href` e o texto no conteúdo.
  *
- * ### Para que serve
+ * Em SPA, use `navigation-mode="event"` e trate `brNavigate`.
  *
- * - **Navegação institucional:** Oferece acesso direto a páginas de serviços, portais correlatos ou áreas centrais do órgão.
- * - **Integração SPA:** Suporta navegação web padrão via atributo `href` ou integração com roteadores SPA via eventos de navegação.
- *
- * ### Papel na composição
- *
- * Atua como item folha de navegação dentro do cabeçalho.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser utilizado dentro de um `br-header-list` posicionado no slot `links` do `br-header`.
- * - Não deve ser utilizado de forma avulsa fora do ecossistema de cabeçalho.
- *
-
  * @slot default - Slot para o conteúdo do link exibido no cabeçalho.
  */
 export class HeaderLink {
@@ -85,7 +72,7 @@ export class HeaderLink {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: '1e351e86386d34dcb1b131eeba11bd37f7fe57ed' }, h("br-item", { key: 'fbfaeb0bc5f94cc0fc9056ac8eeed7b4c113d462', id: this.customId, class: this.getCssClassMap(), density: this.compactHeaderWithoutBrand ? 'small' : 'large', href: this.href ?? undefined, target: this.effectiveTarget, navigationMode: this.effectiveNavigationMode }, h("slot", { key: 'b77b677dc1b4938cdfddb35e5017c98df49045aa' }))));
+        return (h(Host, { key: '9739bce294277bc384ac0563a0729ccf7ee289e6' }, h("br-item", { key: 'c8df548daebfe1619e0adf01807af12f18517e24', id: this.customId, class: this.getCssClassMap(), density: this.compactHeaderWithoutBrand ? 'small' : 'large', href: this.href ?? undefined, target: this.effectiveTarget, navigationMode: this.effectiveNavigationMode }, h("slot", { key: 'c1954c9c038f72eaa344cda512c4ff975005fbf0' }))));
     }
     static get is() { return "br-header-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,23 +7,10 @@ import { BREAKPOINTS, BreakpointObserver } from "../../../shared/utils/breakpoin
 import { isEventTargetInside } from "../../../shared/utils/event";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * O componente `br-header-list` é o subcomponente contêiner do GovBR-DS que organiza links de navegação ou botões funcionais em uma estrutura de lista horizontal acessível.
+ * Lista de links ou atalhos do `br-header`. Use no slot `links`, com `br-header-link`, ou no slot `functions`, com `br-header-function`.
  *
- * ### Para que serve
+ * Em telas menores, a lista vira um menu que abre e fecha; o título desse menu vem de `list-title`.
  *
- * - **Agrupamento semântico:** Estrutura itens navegáveis ou funcionais em elementos de lista semânticos.
- * - **Distribuição e espaçamento:** Garante o alinhamento horizontal padronizado de itens no cabeçalho.
- *
- * ### Papel na composição
- *
- * Atua como elo intermediário entre o orquestrador `br-header` e os itens filhos individuais (`br-header-link` ou `br-header-function`).
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser inserido nos slots `links` ou `functions` do orquestrador `br-header`.
- * - Serve de contêiner direto para subcomponentes `br-header-link` ou `br-header-function`.
- *
-
  * @slot default - Slot para o conteúdo da lista de navegação no cabeçalho.
  */
 export class HeaderList {
@@ -264,7 +251,7 @@ export class HeaderList {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: 'ee16f15ced695461391724518d7a9ebaf0e863e8' }, h("nav", { key: 'f6477e250a953661eb85c4145770ff7056db915e', class: this.getCssClassMap(), "aria-label": this.listTitle || 'Navegação do cabeçalho' }, BreakpointObserver.getBreakpoints('until', BREAKPOINTS.MEDIUM).includes(this.currentBreakpoint) ||
+        return (h(Host, { key: 'b9a1554e645d5d85db04e69261f3fc6133a80e20' }, h("nav", { key: 'c011038503aa2bea0b6311b28615139401dc4399', class: this.getCssClassMap(), "aria-label": this.listTitle || 'Navegação do cabeçalho' }, BreakpointObserver.getBreakpoints('until', BREAKPOINTS.MEDIUM).includes(this.currentBreakpoint) ||
             this.isShrunk
             ? this.renderDropdownButton()
             : null, this.renderList())));

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

@@ -9,23 +9,10 @@ import { isNil } from "../../../shared/utils/isNil";
 import { handleNavigationClick } from "../../../shared/utils/navigation";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * O componente `br-header-logo` é o subcomponente do GovBR-DS responsável por renderizar a marca visual oficial ou a assinatura do órgão dentro do cabeçalho.
+ * Logotipo do `br-header`. Use no slot `logo`.
  *
- * ### Para que serve
+ * Informe a imagem em `src` e o texto alternativo em `description`. Com `href`, a logo vira link; em SPA, use `navigation-mode="event"` e trate `brNavigate`.
  *
- * - **Exibição de marca:** Apresenta a imagem ou logotipo institucional no topo da página.
- * - **Link de retorno:** Permite associar um link à marca, direcionando a pessoa usuária à página inicial do portal ou sistema.
- *
- * ### Papel na composição
- *
- * Atua como elemento de identidade visual no cabeçalho. Não gerencia a estrutura do topo nem as ações utilitárias, papel reservado ao orquestrador `br-header`.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser utilizado posicionado preferencialmente no slot `logo` ou `signature` do componente orquestrador `br-header`.
- * - Não deve ser utilizado isoladamente fora do contexto de cabeçalho institucional.
- *
-
  * @slot default - Slot para a logo personalizada exibida no cabeçalho.
  *
  * @part container - Wrapper da logo do header.
@@ -190,7 +177,7 @@ export class HeaderLogo {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: '51ef9ab626248d36fa3e6080b8c0ab2ca3fb6980' }, h("slot", { key: 'b24730defa0d5e0192f2ff005dcfb471e2eb5d49' }, h("div", { key: '9492cf4e875265cf21d19b169955e250e1834f14', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (h("a", { href: this.href, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.renderImageElement())) : (this.renderImageElement())))));
+        return (h(Host, { key: 'd1b2adeb625c1e5de59451083077784d3617b05b' }, h("slot", { key: '833ae3c87ce87873a280475a58e4070b5d095a21' }, h("div", { key: '5bb37703f9625a6b801863e633139c0d173c7666', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (h("a", { href: this.href, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.renderImageElement())) : (this.renderImageElement())))));
     }
     static get is() { return "br-header-logo"; }
     static get encapsulation() { return "shadow"; }