@govbr-ds/webcomponents 2.4.0 → 2.5.0

package/dist/collection/components/button/button.js

@@ -11,32 +11,32 @@ const BUTTON_SHAPES = ['circle', 'block', 'pill'];
 const BUTTON_TYPES = ['button', 'reset', 'submit'];
 const BUTTON_ARIA_HASPOPUP_VALUES = ['true', 'menu', 'listbox', 'tree', 'grid', 'dialog'];
 /**
- * O componente `br-button` é o controle fundamental de ação e acionamento do GovBR-DS. Desenvolvido para permitir que pessoas usuárias executem comandos, confirmem intenções e submetam ou redefinam formulários, ele oferece retorno visual imediato e conformidade com diretrizes de acessibilidade WAI-ARIA.
+ * O `br-button` executa uma ação: salvar, enviar um formulário, abrir um modal, aplicar um filtro.
  *
- * ### Para que serve
+ * O texto e o ícone vão dentro do botão. A aparência é definida por `emphasis` (`primary`, `secondary` ou `tertiary`) e `shape` (`circle`, `block` ou `pill`).
  *
- * - **Disparo de ações do sistema:** Executa comandos locais ou assíncronos na interface (ex.: salvar dados, abrir modais, aplicar filtros).
- * - **Integração com formulários:** Suporta os tipos nativos de botão (`type="button"`, `type="submit"` e `type="reset"`), integrando-se ao ciclo de submissão do formulário HTML.
- * - **Variantes e hierarquia visual:** Oferece diferentes estilos visuais (primário, secundário), densidades e opções de exibição (com ícone, somente ícone, circular e em bloco).
- * - **Feedback de carregamento e estado:** Informa estados de processamento com o modo `loading` e desativação acessível com `disabled`.
+ * ```html
+ * <br-button emphasis="primary" type="submit">Enviar</br-button>
  *
- * ### Quando utilizar
+ * <br-button shape="circle" aria-label="Fechar">
+ *   <br-icon src="/icones/fechar.svg"></br-icon>
+ * </br-button>
+ * ```
  *
- * - **Utilize quando:**
- *   - A pessoa usuária precisar executar uma ação imediata ou submeter dados dentro do fluxo atual da página.
- *   - For necessário acionar componentes flutuantes (como abrir `br-modal`, alternar `br-collapse` ou expandir `br-dropdown`).
- * - **Evite e prefira outro componente quando:**
- *   - A ação tiver como objetivo navegar para outra página ou alterar a URL do navegador (prefira `br-link` ou um elemento `<a>` nativo).
- *   - O controle representar uma escolha de valor fixo entre poucas opções mutuamente exclusivas (prefira `br-radio` ou `br-radio-group`).
+ * O tipo padrão é `button`. Use `type="submit"` ou `type="reset"` para agir sobre o formulário em que o botão está. Durante uma operação demorada, ative `loading`.
  *
- * ### Estrutura e Slots
+ * ### Quando usar
  *
- * O `br-button` é um controle direto e autônomo:
- * - `default`: Slot para inserção do texto do rótulo, ícones de apoio (`br-icon`) ou composições personalizadas.
+ * - Executar uma ação na página atual.
+ * - Abrir modal, menu ou painel.
  *
- * 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/button?tab=designer).
+ * ### Quando evitar
+ *
+ * - Para ir a outra página: use `br-link` ou `<a>`.
+ * - Para escolher entre opções: use `br-radio` ou `br-checkbox`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/button?tab=designer).
  *
-
  * @category Ações, Formulários
  * @status stable
  * @slot default - Slot para o rótulo ou conteúdo do botão.
@@ -187,7 +187,7 @@ export class Button {
     }
     render() {
         const disabled = this.disabled || this.formDisabled;
-        return (h(Host, { key: '5e2b11f3d6382035f2babd6e1c359b281e77f7c5' }, h("button", { key: 'c6e96629a694539b350602bcafd244f25ed77934', ref: (element) => (this.nativeButton = element), part: "button", "aria-label": this.ariaLabel || null, "aria-pressed": this.ariaPressed || null, "aria-disabled": disabled ? 'true' : null, "aria-busy": (this.loading ?? this.isLoading) ? 'true' : null, "aria-expanded": this.ariaExpanded || null, "aria-haspopup": this.effectiveAriaHaspopup, "aria-controls": this.ariaControls || null, class: this.getCssClassMap(), type: this.effectiveType, id: this.customId, disabled: disabled, value: this.value, tabindex: this.el.hasAttribute('tabindex') ? this.el.tabIndex : this.effectiveCustomTabIndex, onClick: this.handleClick }, (this.loading ?? this.isLoading) && h("span", { key: '721f149c9476589a42ff6aacd267a2b43bd07e8f', class: "loading-sr-only" }, "Carregando"), h("slot", { key: '24bc9d858f78fd0d147617a6250bc88378feb5e3' }))));
+        return (h(Host, { key: '3cb292f2f525e53f8f3527dde4697db5369e034f' }, h("button", { key: '35856dc79f82b594504c396c1cafc9d2b1769eac', ref: (element) => (this.nativeButton = element), part: "button", "aria-label": this.ariaLabel || null, "aria-pressed": this.ariaPressed || null, "aria-disabled": disabled ? 'true' : null, "aria-busy": (this.loading ?? this.isLoading) ? 'true' : null, "aria-expanded": this.ariaExpanded || null, "aria-haspopup": this.effectiveAriaHaspopup, "aria-controls": this.ariaControls || null, class: this.getCssClassMap(), type: this.effectiveType, id: this.customId, disabled: disabled, value: this.value, tabindex: this.el.hasAttribute('tabindex') ? this.el.tabIndex : this.effectiveCustomTabIndex, onClick: this.handleClick }, (this.loading ?? this.isLoading) && h("span", { key: '7c30ff67048e18e2a5eaa88a8e728b69d5ffbed5', class: "loading-sr-only" }, "Carregando"), h("slot", { key: '874a1bac06190479b2576043493953cf617290d0' }))));
     }
     static get is() { return "br-button"; }
     static get encapsulation() { return "shadow"; }
@@ -359,7 +359,7 @@ export class Button {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado ativo can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isActive`."
+                    "text": "Estado ativo atual. Quando informado, tem preced\u00EAncia sobre `isActive`."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +401,7 @@ export class Button {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado de carregamento can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isLoading`."
+                    "text": "Estado de carregamento atual. Quando informado, tem preced\u00EAncia sobre `isLoading`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/card/card.js

@@ -6,35 +6,33 @@ import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../shared/utils/id";
 import { hasNamedLightDomSlot } from "../../shared/utils/slot";
 /**
- * O componente `br-card` é um contêiner estruturado e flexível do GovBR-DS, projetado para agrupar informações, mídias e ações correlacionadas em uma superfície visual coesa e destacada.
+ * O `br-card` agrupa conteúdos sobre um mesmo assunto em um bloco destacado, como um serviço, uma notícia ou um resultado de busca.
  *
- * ### Para que serve
+ * Organize o conteúdo nos slots `media`, `header`, `content` e `footer`, ou coloque tudo no slot padrão.
  *
- * - **Agrupamento de informações modulares:** Organiza conteúdos heterogêneos de um mesmo assunto (como resumos de serviços, cartões de notícias, painéis de métricas ou resultados de busca).
- * - **Segmentação visual limpa:** Proporciona hierarquia e legibilidade através de bordas, elevações e espaçamentos padronizados pelos tokens do design system.
- * - **Suporte a interação opcional:** Pode atuar como elemento estático de leitura ou como contêiner interativo/navegável.
+ * ```html
+ * <br-card>
+ *   <img slot="media" src="/imagens/servico.jpg" alt="" />
+ *   <h3 slot="header">Carteira de Trabalho Digital</h3>
+ *   <p slot="content">Consulte seus vínculos de emprego.</p>
+ *   <br-button slot="footer" emphasis="secondary">Acessar</br-button>
+ * </br-card>
+ * ```
  *
- * ### Quando utilizar
+ * Use `interactive` quando o card inteiro for clicável, para dar o retorno visual ao passar o mouse.
  *
- * - **Utilize quando:**
- *   - Desejar exibir blocos independentes de conteúdo em grades (grid) ou listas de cartões.
- *   - O conteúdo for composto por uma combinação de elementos (imagem/vídeo, cabeçalho, texto explicativo e botões de ação).
- * - **Evite e prefira outro componente quando:**
- *   - Os dados forem puramente tabulares ou comparativos entre múltiplos itens homogêneos (prefira `br-table`).
- *   - Houver apenas uma sequência linear simples de textos ou links (prefira `br-list`).
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Blocos independentes exibidos em grade ou lista.
+ * - Conteúdo que combina imagem, título, texto e ações.
  *
- * O `br-card` oferece estrutura modular com slots nomeados ou composição livre:
- * - `media`: Slot superior para exibição de imagens, ilustrações ou mídia de destaque.
- * - `header`: Slot para título, subtítulo ou cabeçalho informativo do card.
- * - `content`: Slot principal para o corpo de texto e conteúdo descritivo.
- * - `footer`: Slot inferior para botões de ação (`br-button`), links complementares ou metadados.
- * - `default`: Slot livre para renderização direta quando não for necessária a divisão pré-definida em seções.
+ * ### 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/card?tab=designer).
+ * - Dados para comparar em linhas e colunas: use `br-table`.
+ * - Uma lista simples de textos ou links: use `br-list`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/card?tab=designer).
  *
-
  * @category Layout, Conteúdo
  * @status stable
  * @slot default - Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.
@@ -131,7 +129,7 @@ export class BrCard {
     }
     render() {
         const hasStructuredContent = this.hasHeader || this.hasContent || this.hasFooter;
-        return (h(Host, { key: 'cfa9cb5196cffad8a64222f8538853f61ac0f898', id: this.customId, "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '735edcfe8eee477872bd8b4c1fe3bd8dc45a1d69', class: this.getCssClassMap(), part: "wrapper" }, hasStructuredContent
+        return (h(Host, { key: '4440c902897ee33b721a96994657042e207a1a3a', id: this.customId, "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '081575b4627d18eb4586631c2bae9078aff0ec88', class: this.getCssClassMap(), part: "wrapper" }, hasStructuredContent
             ? [
                 this.hasMedia && (h("div", { part: "media" }, h("slot", { name: "media" }))),
                 this.hasHeader && (h("div", { class: this.getHeaderClassMap(), part: "header" }, h("slot", { name: "header" }))),

package/dist/collection/components/carousel/carousel-page/carousel-page.js

@@ -4,20 +4,10 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * Subcomponente especializado de `br-carousel`, responsável por encapsular exatamente um slide ou página individual dentro da sequência de apresentação.
+ * Representa um slide do `br-carousel`. Use somente dentro dele.
  *
- * ### Papel na composição
+ * Coloque no slide a imagem, o texto e as ações. Para começar em um slide que não seja o primeiro, marque-o com `active`; depois disso, o `br-carousel` controla o slide ativo.
  *
- * - Contém a mídia visual (imagem, ilustração ou vídeo), textos informativos e botões de ação associados àquele slide específico.
- * - Recebe as classes e propriedades de visibilidade ativa gerenciadas pelo carrossel pai.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser instanciado exclusivamente dentro do slot padrão do orquestrador `br-carousel`. O componente pai coordena as transições de deslize, calcula o índice do slide e gerencia a acessibilidade. Não deve ser usado como elemento autônomo fora de um carrossel.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).
- *
-
  * @slot default - Qualquer conteúdo: imagens, textos, cards, vídeos, outros componentes do Design System.
  *
  * @part content - Wrapper interno do conteúdo do slide.
@@ -79,7 +69,7 @@ export class CarouselPage {
         }
     }
     render() {
-        return (h(Host, { key: 'a030e73ed1cd116f055603331dfec94bceb3493a', id: this.customId || undefined, role: this.panelRole, "aria-roledescription": "slide", "aria-label": this.slideLabel, tabIndex: this.isActive ? 0 : undefined }, h("div", { key: 'd4194bd1788e2ea168165bf6a303b09335872579', part: "content", class: "carousel-content" }, h("slot", { key: 'd2d2a15e0f8486c59a27a20af618e3f395f84a52' }))));
+        return (h(Host, { key: '845cfda2a73501d99b55753259b74a13e9377ce1', id: this.customId || undefined, role: this.panelRole, "aria-roledescription": "slide", "aria-label": this.slideLabel, tabIndex: this.isActive ? 0 : undefined }, h("div", { key: '20934f3d0ce9f1b01e917d432bab441ac1152875', part: "content", class: "carousel-content" }, h("slot", { key: 'b3d9e87130b66e756630a828aa63302df8096270' }))));
     }
     static get is() { return "br-carousel-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/carousel.js

@@ -8,41 +8,34 @@ import { generateUniqueId } from "../../shared/utils/id";
 import { resolveAllowedPropValue, resolveIntegerPropValue } from "../../shared/utils/props";
 import { UniversalSwipe } from "../../shared/utils/swipe";
 /**
- * O componente `br-carousel` é o contêiner de apresentação rotativa e sequencial de conteúdos do GovBR-DS, desenvolvido para exibir múltiplos slides em um espaço delimitado onde apenas um item (ou grupo ativo) fica em foco por vez.
+ * O `br-carousel` mostra uma sequência de slides, um por vez, com botões de anterior e próximo e indicadores de posição.
  *
- * ### Para que serve
+ * Coloque cada slide em um `br-carousel-page` e dê um nome ao carrossel com `aria-label`.
  *
- * - **Apresentação rotativa de destaque:** Ideal para galerias visuais, banners informativos, campanhas institucionais e passos ilustrativos.
- * - **Navegação assistida:** Fornece controles de avanço e retrocesso (setas), barra de indicadores de página/slides (bolinhas de paginação) e suporte a gestos de toque (swipe) em dispositivos móveis.
- * - **Reprodução automática controlável:** Suporta transição automática temporizada com botão obrigatório de pausa/reprodução para conformidade com diretrizes de acessibilidade (WCAG).
+ * ```html
+ * <br-carousel aria-label="Destaques">
+ *   <br-carousel-page>
+ *     <img src="/imagens/campanha.jpg" alt="Campanha de vacinação" />
+ *   </br-carousel-page>
+ *   <br-carousel-page>
+ *     <p>Atualize seu cadastro até 30 de junho.</p>
+ *   </br-carousel-page>
+ * </br-carousel>
+ * ```
  *
- * ### Quando utilizar
+ * Para ouvir a troca de slide, use `brCarouselPageChange`; `detail.activePage` começa em 1.
  *
- * - **Utilize quando:**
- *   - Houver um conjunto de imagens, avisos ou destaques que compartilham o mesmo nível de relevância visual.
- *   - O espaço vertical da página for restrito e comportar a rotação sequencial de conteúdos.
- * - **Evite e prefira outro componente quando:**
- *   - Todas as informações forem cruciais para a tarefa do usuário e precisarem ficar simultaneamente visíveis (prefira uma grade com `br-card`).
- *   - O fluxo representar preenchimento obrigatório de formulário por etapas (prefira `br-wizard` ou `br-step`).
+ * ### Quando usar
  *
- * ### Composição e Subcomponentes
+ * - Imagens ou avisos com a mesma importância, em espaço limitado.
  *
- * O ecossistema do Carousel é composto por:
+ * ### Quando evitar
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-carousel` | **Orquestrador principal.** Gerencia a rotação, temporizador, botões de paginação, navegação por teclado e gestos. | Contêiner raiz obrigatório declarado na página. |
- * | `br-carousel-page` | **Slide individual.** Encapsula o conteúdo visual ou textual de cada página do carrossel. | Declarado dentro do slot padrão do `br-carousel`. |
+ * - Informação essencial para a tarefa: mostre tudo de uma vez, por exemplo em uma grade de `br-card`.
+ * - Etapas de um formulário: use `br-wizard` ou `br-step`.
  *
- * ### Como os subcomponentes se relacionam
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).
  *
- * O `br-carousel` projeta internamente os controles de navegação e gerencia os elementos `br-carousel-page` declarados em seu interior:
- * 1. O componente pai monitora os slides filhos, calcula o total de páginas e gera dinamicamente os botões indicadores.
- * 2. Apenas a página correspondente ao índice ativo é exibida e anunciada para leitores de tela com atributos `aria-roledescription="slide"`.
- *
- * 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/carousel?tab=designer).
- *
-
  * @category Conteúdo, Navegação
  * @status stable
  * @slot default - Slot para os slides do carrossel. Aceita exclusivamente elementos `br-carousel-page`.
@@ -642,7 +635,7 @@ export class Carousel {
     }
     render() {
         const dataStage = this.getDataStage();
-        return (h(Host, { key: 'a3898eb80a9d20b2624b278a67789b10f92622df', style: this.getHostStyle() }, h("div", { key: '3c9b49bc7fb134148d35e7d8d2144c6e72052f1b', id: this.customId, part: "container", class: this.getCssClassMap(), "data-stage": dataStage, "data-mobile-nav": this.mobileNav ? '' : undefined, role: "region", "aria-label": this.ariaLabel, "aria-roledescription": "carousel", onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, this.effectiveAutoplay && this.renderPlayButton(), this.renderNavButton('prev'), h("div", { key: '2d40f6344b7bacd06faff14f96e400a39e637668', id: `${this.customId}-stage`, part: "stage", class: "carousel-stage", "aria-live": this.isRotating ? 'off' : 'polite', "aria-atomic": "false", ref: (el) => (this.stageRef = el) }, h("slot", { key: '93708afc74f54dc27aaf742c0aea92829b23c4db' })), this.renderNavButton('next'), this.renderIndicator())));
+        return (h(Host, { key: 'a9b083ad2d3412bac15a612301bd5153a532b400', style: this.getHostStyle() }, h("div", { key: 'e8c9f44a6ebd4c109d0a6a97d54b58700252e8c0', id: this.customId, part: "container", class: this.getCssClassMap(), "data-stage": dataStage, "data-mobile-nav": this.mobileNav ? '' : undefined, role: "region", "aria-label": this.ariaLabel, "aria-roledescription": "carousel", onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, this.effectiveAutoplay && this.renderPlayButton(), this.renderNavButton('prev'), h("div", { key: 'a1d706df04caf90eabcc1d9626b108419d50846d', id: `${this.customId}-stage`, part: "stage", class: "carousel-stage", "aria-live": this.isRotating ? 'off' : 'polite', "aria-atomic": "false", ref: (el) => (this.stageRef = el) }, h("slot", { key: '4ca2c30ffe6ce5131867aecd957f60b94f28074e' })), this.renderNavButton('next'), this.renderIndicator())));
     }
     static get is() { return "br-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -1080,7 +1073,7 @@ export class Carousel {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando o slide ativo muda."
+                    "text": "Evento emitido quando o slide ativo muda."
                 },
                 "complexType": {
                     "original": "CarouselPageChangeDetail",
@@ -1117,7 +1110,7 @@ export class Carousel {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando a reprodu\u00E7\u00E3o autom\u00E1tica come\u00E7a."
+                    "text": "Evento emitido quando a reprodu\u00E7\u00E3o autom\u00E1tica come\u00E7a."
                 },
                 "complexType": {
                     "original": "void",
@@ -1147,7 +1140,7 @@ export class Carousel {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando a reprodu\u00E7\u00E3o autom\u00E1tica \u00E9 pausada."
+                    "text": "Evento emitido quando a reprodu\u00E7\u00E3o autom\u00E1tica \u00E9 pausada."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/checkbox/checkbox.js

@@ -11,35 +11,29 @@ import { hasAssignedSlotContent, hasDefaultLightDomContent } from "../../shared/
 import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
 const CHECKBOX_STATES = ['valid', 'invalid'];
 /**
- * O componente `br-checkbox` é o controle de formulário oficial do GovBR-DS para seleção binária independente (marcado ou desmarcado) ou intermediária (indeterminada). Compatível com as diretrizes WAI-ARIA para checkboxes, ele integra-se nativamente a formulários HTML via `formAssociated`.
+ * O `br-checkbox` marca ou desmarca uma opção independente. Funciona em formulários como um `<input type="checkbox">`: é enviado com `name` e `value` quando está marcado.
  *
- * ### Para que serve
+ * ```html
+ * <br-checkbox name="termos" value="aceito" label="Li e aceito os termos" required></br-checkbox>
+ * ```
  *
- * - **Seleção independente múltipla:** Permite que a pessoa usuária escolha qualquer quantidade de opções (zero, uma ou várias) de uma lista de alternativas independentes.
- * - **Confirmação e aceite binário:** Utilizado para termos de uso, declarações de concordância e confirmações obrigatórias.
- * - **Estado indeterminado:** Suporta a propriedade `indeterminate`, essencial para checkboxes mestres em listas hierárquicas (indicando que parte dos itens filhos está marcada).
- * - **Validação e formulários:** Comunica valor, estado de validação e mensagens contextuais de erro (`feedback`) diretamente com a API nativa de formulários HTML (`ElementInternals`).
+ * Use `indeterminate` para indicar seleção parcial, por exemplo em um "selecionar todos" quando só parte dos itens está marcada.
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - Houver uma lista de opções onde a seleção de uma alternativa não anula nem depende das demais.
- *   - O usuário precisar confirmar explicitamente uma condição única (ex.: "Li e concordo com os termos").
- *   - For necessário criar controle de seleção em lote ("Selecionar todos").
- * - **Evite e prefira outro componente quando:**
- *   - As opções forem mutuamente exclusivas (apenas uma pode ser escolhida): prefira `br-radio` ou `br-radio-group`.
- *   - A ação ativar ou desativar instantaneamente um recurso sem exigir submissão de formulário: prefira `br-switch`.
- *   - Houver muitas opções (mais de 7) em espaço reduzido: prefira `br-select` múltiplo.
+ * - Opções em que escolher uma não impede escolher outra.
+ * - Confirmar uma condição, como aceitar termos.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-checkbox` é um controle autônomo com slots de suporte:
- * - `default`: Slot para o texto do rótulo associado ao checkbox (alternativa à propriedade `label`).
- * - `feedback`: Slot para exibição de mensagens de validação e alertas contextuais (como `br-message`).
+ * - Só uma opção pode ser escolhida: use `br-radio-group`.
+ * - A mudança vale na hora, sem enviar formulário: use `br-switch`.
+ * - Muitas opções em pouco espaço: use `br-select` com `multiple`.
  *
- * 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/checkbox?tab=designer).
+ * Para várias opções da mesma pergunta, agrupe-as em um `br-checkbox-group`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/checkbox?tab=designer).
  *
-
  * @category Formulários, Seleção
  * @status stable
  * @see br-checkbox-group
@@ -348,7 +342,7 @@ export class Checkbox {
     }
     render() {
         const isLegacyCheckgroupItem = this.el.closest('br-checkgroup') !== null;
-        return (h(Host, { key: 'c11dbc51c863b6e39a0e000a4af2f59b8ed07ad1', class: isLegacyCheckgroupItem ? 'checkgroup-item' : undefined }, h("div", { key: 'a288d9304764839f9759f411c25a02fcb955e998', class: this.getCssClassMap(), part: "container" }, h("input", { key: 'd4be0d9208a8b2a7edf6d9b4aa82a2885589e617', part: "input", ref: (el) => {
+        return (h(Host, { key: '7b89671e8b638793f607981cf35fd30fc1b47e19', class: isLegacyCheckgroupItem ? 'checkgroup-item' : undefined }, h("div", { key: '5cd0948378cba5151330f687a30130c4d6985422', class: this.getCssClassMap(), part: "container" }, h("input", { key: 'ef73eeb6082cb1daae59c16a8493f5f98e3b6911', part: "input", ref: (el) => {
                 this.nativeInput = el;
                 if (el)
                     el.indeterminate = this.indeterminate;
@@ -361,7 +355,7 @@ export class Checkbox {
                 .filter(Boolean)
                 .join(' ') || null, "aria-errormessage": this.manualValidationMessage || this.validatorMessage || this.hasFeedbackSlot
                 ? `${this.customId}-feedback`
-                : null }), h("label", { key: 'ff0faebbc0df911438820eb2337480c5d03a77f5', part: "label", htmlFor: this.customId, class: (this.labelHidden ?? this.hasHiddenLabel) ? 'visually-hidden' : undefined }, this.slotDefault ? h("slot", null) : this.label)), this.isFather ? (h("span", { id: "children-number", class: "sr-only" }, "N\u00FAmero de op\u00E7\u00F5es: ", this.numberOfChildren)) : null, h("div", { key: '7806bb3eb99a309826e04ff3d3b5484d8611c8a3', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.manualValidationMessage && !this.validatorMessage }, h("slot", { key: 'f1228085bece8e7e7f6f19ddda6f8fe82084e963', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.manualValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.manualValidationMessage || this.validatorMessage })) : null)));
+                : null }), h("label", { key: 'f710f5c89937a20c436916ef38e3fe4fb46934af', part: "label", htmlFor: this.customId, class: (this.labelHidden ?? this.hasHiddenLabel) ? 'visually-hidden' : undefined }, this.slotDefault ? h("slot", null) : this.label)), this.isFather ? (h("span", { id: "children-number", class: "sr-only" }, "N\u00FAmero de op\u00E7\u00F5es: ", this.numberOfChildren)) : null, h("div", { key: '8ede5b61be3d00daf7a5a8c78ef54519afc763b6', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.manualValidationMessage && !this.validatorMessage }, h("slot", { key: '60a0e8282a4dfd9575b923cc2056313c8f0bb986', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.manualValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.manualValidationMessage || this.validatorMessage })) : null)));
     }
     static get is() { return "br-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -617,7 +611,7 @@ export class Checkbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado de feedback can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `state`."
+                    "text": "Estado de feedback. Quando informado, tem preced\u00EAncia sobre `state`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -8,32 +8,31 @@ import { createMicrotaskReconciler, getOwnedAssignedElements } from "../../share
 import { resolveAllowedPropValue } from "../../shared/utils/props";
 const CHECKBOX_GROUP_ORIENTATIONS = ['horizontal', 'vertical'];
 /**
- * O componente `br-checkbox-group` é o contêiner semântico e orquestrador de múltiplos controles `br-checkbox` que pertencem a um mesmo contexto ou pergunta em formulários do GovBR-DS.
+ * O `br-checkbox-group` reúne checkboxes da mesma pergunta e adiciona um checkbox "Selecionar tudo" no topo.
  *
- * ### Para que serve
+ * O "Selecionar tudo" marca ou desmarca todas as opções e fica em estado parcial quando só algumas estão marcadas. O `label` vira a legenda do grupo para leitores de tela.
  *
- * - **Agrupamento semântico e acessibilidade:** Cria a estrutura recomendada de `fieldset` e `legend` para leitores de tela, garantindo que o contexto da pergunta seja anunciado antes de cada opção individual.
- * - **Validação conjunta:** Permite coordenar regras de validação em grupo (como exigir uma quantidade mínima ou máxima de checkboxes selecionados).
- * - **Alinhamento e padronização visual:** Organiza os checkboxes vertical ou horizontalmente conforme o leiaute da interface.
+ * ```html
+ * <br-checkbox-group label="Receber notificações por">
+ *   <br-checkbox name="canais" value="email" label="E-mail"></br-checkbox>
+ *   <br-checkbox name="canais" value="sms" label="SMS"></br-checkbox>
+ *   <br-checkbox name="canais" value="app" label="Aplicativo"></br-checkbox>
+ * </br-checkbox-group>
+ * ```
  *
- * ### Quando utilizar
+ * Use `orientation="horizontal"` para as opções lado a lado, e `select-all-label` e `unselect-all-label` para trocar os textos do "Selecionar tudo".
  *
- * - **Utilize quando:**
- *   - Existirem duas ou mais opções em checkbox que respondem à mesma pergunta ou pertencem ao mesmo conjunto lógico de preferências.
- *   - For necessário aplicar rótulo geral e mensagens de validação ao grupo completo de escolhas.
- * - **Evite e prefira outro componente quando:**
- *   - Houver apenas um único checkbox independente (ex.: aceite de termos): use `br-checkbox` isoladamente.
- *   - A seleção for de escolha única (mutuamente exclusiva): use `br-radio-group`.
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Várias opções independentes que respondem à mesma pergunta.
  *
- * O `br-checkbox-group` atua como container orquestrador:
- * - `default`: Slot onde devem ser inseridos os elementos `br-checkbox` que compõem o grupo.
- * - `feedback`: Slot opcional para mensagem de erro ou orientação de validação associada ao grupo todo.
+ * ### 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/checkgroup?tab=designer).
+ * - Um único checkbox, como aceite de termos: use só o `br-checkbox`.
+ * - Apenas uma opção pode ser escolhida: use `br-radio-group`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).
  *
-
  * @category Formulários, Seleção
  * @status stable
  * @see br-checkbox
@@ -258,9 +257,9 @@ export class CheckboxGroup {
     }
     render() {
         const selectAllLabel = this.checked ? this.unselectAllLabel : this.selectAllLabel;
-        return (h(Host, { key: '5fcab47283a3e2df57ffbdc5bcca09c537d32951', style: { opacity: this.disabled ? '1' : undefined } }, h("fieldset", { key: '0f6d5a4f378d36eea6d65c13740a92216f4b64fa', class: this.getCssClassMap(), style: { width: '100%' }, disabled: this.disabled }, this.label && h("legend", { key: 'f3424c55354d30341f5c55ba1eb647b15457c355' }, this.label), h("div", { key: 'adefe827bf0e7a0bac8bd88739905ea55a2ed365', class: "mb-1" }, h("div", { key: 'abcf8538b1eb5b1155c4d0be4fec437384868437', class: "checkbox-group-example" }, h("br-checkbox", { key: '0e08247a7ad72a2a56a486601cceec8e92b33bd2', ref: (element) => {
+        return (h(Host, { key: 'e48f4821d83e3fb0a61c94c801d078219c2960e5', style: { opacity: this.disabled ? '1' : undefined } }, h("fieldset", { key: 'af1c2f8e44fb69b74cf1b4397a9aac05ae26d089', class: this.getCssClassMap(), style: { width: '100%' }, disabled: this.disabled }, this.label && h("legend", { key: '8949610047bf92dde039895fdf0b47fe75ebdaef' }, this.label), h("div", { key: '51d3238316ee833bfa5d79e405fd0cd2a145a6b2', class: "mb-1" }, h("div", { key: '2bd6eca4f179cb63a4bd2b0af1092b72be7c2ca4', class: "checkbox-group-example" }, h("br-checkbox", { key: 'e24c185b8b04a61e416aa7c32aced593816b4b1a', ref: (element) => {
                 this.controller = element;
-            }, id: `checkbox-group-${this.customId}`, "data-controller": "true", name: `checkbox-group-${this.customId}`, checked: this.checked, indeterminate: this.isIndeterminate, label: selectAllLabel, "aria-label": selectAllLabel, disabled: this.disabled, isFather: true, "is-father": true }))), h("div", { key: 'dbb446b00abdbda65925dc95034c3aeb237084c4', class: "checkbox-group-options" }, h("slot", { key: 'e2b0c5155435b7af5d9460fa5d21f38d2f80cc0b' })))));
+            }, id: `checkbox-group-${this.customId}`, "data-controller": "true", name: `checkbox-group-${this.customId}`, checked: this.checked, indeterminate: this.isIndeterminate, label: selectAllLabel, "aria-label": selectAllLabel, disabled: this.disabled, isFather: true, "is-father": true }))), h("div", { key: 'f018fbdb4ee141da6673285590df2195ee4d14f0', class: "checkbox-group-options" }, h("slot", { key: '293012a6d34fa50d9417123ac5403c4c89b7284f' })))));
     }
     static get is() { return "br-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkgroup/checkgroup.js

@@ -4,20 +4,8 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * O componente `br-checkgroup` é o alias legado mantido para compatibilidade com versões anteriores da biblioteca.
+ * Nome antigo do `br-checkbox-group`, mantido para compatibilidade. Em código novo, use `br-checkbox-group`.
  *
- * ### Papel na biblioteca
- *
- * - Atua como um redirecionador direto para a implementação do `br-checkbox-group`.
- * - Permite que aplicações já existentes mantenham o funcionamento sem interrupções enquanto realizam a transição gradativa.
- *
- * ### Regra de uso e migração
- *
- * Em novos projetos e manutenções ativas, **utilize sempre a tag canônica `br-checkbox-group`**. O uso de `br-checkgroup` está depreciado e deve ser substituído pela tag oficial.
- *
- * Para a documentação canônica completa, consulte a página do [br-checkbox-group](/docs/components/checkbox-group).
- *
-
  * @category Formulários, Seleção
  * @status deprecated
  * @see br-checkbox-group
@@ -32,7 +20,7 @@ export class Checkgroup {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '19298fbd247fa7ae6360dad0c6b41641fd9d2f5d' }, h("br-checkbox-group", { key: '943b4a1d72ca1034d71fa79d748d4717f9cd7425', label: this.label, selectAllLabel: this.selectAllLabel ?? this.labelDesselecionado, unselectAllLabel: this.unselectAllLabel ?? this.labelSelecionado, indeterminate: this.indeterminate, customId: this.customId, disabled: this.disabled }, h("slot", { key: '8ff436a7e53c1c8d266d0e047013a89307805eec' }))));
+        return (h(Host, { key: '19e78b0742d00553913b704465946959fcb0d0f2' }, h("br-checkbox-group", { key: '3e8c184d80463ec623642e34cb9b02895b29132c', label: this.label, selectAllLabel: this.selectAllLabel ?? this.labelDesselecionado, unselectAllLabel: this.unselectAllLabel ?? this.labelSelecionado, indeterminate: this.indeterminate, customId: this.customId, disabled: this.disabled }, h("slot", { key: 'eaf864eedeb144fea54ef258813bb6beb03f3967' }))));
     }
     static get is() { return "br-checkgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapse/collapse.js

@@ -7,32 +7,36 @@ import { redispatchNativeEvent } from "../../shared/utils/event";
 import { generateUniqueId } from "../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../shared/utils/props";
 /**
- * O componente `br-collapse` é o controle retrátil do GovBR-DS baseado no elemento semântico HTML5 `<details>`, desenvolvido para permitir que a pessoa usuária expanda ou recolha seções de conteúdo sob demanda.
+ * O `br-collapse` mostra e esconde um bloco de conteúdo ao clicar no título. Funciona como um `<details>`.
  *
- * ### Para que serve
+ * ```html
+ * <br-collapse>
+ *   <span slot="trigger">Quem pode solicitar?</span>
+ *   <p>Qualquer pessoa com CPF regular.</p>
+ * </br-collapse>
+ * ```
  *
- * - **Otimização de espaço e hierarquia:** Reduz a sobrecarga de informação inicial na tela, ocultando blocos secundários até que o usuário decida visualizá-los.
- * - **Estruturação de perguntas e respostas:** Padrão oficial para construção de seções de FAQ (perguntas frequentes) e listas explicativas sanfonadas (accordion).
- * - **Acessibilidade nativa:** Por utilizar internamente os elementos `<details>` e `<summary>`, possui controle total de teclado, estado acessível (`open`) e anúncios para tecnologias assistivas sem exigir scripts adicionais complexos.
+ * Use `open` para começar aberto. Para que só um item fique aberto por vez (sanfona), dê o mesmo `accordion-group` a todos:
  *
- * ### Quando utilizar
+ * ```html
+ * <br-collapse accordion-group="faq">…</br-collapse>
+ * <br-collapse accordion-group="faq">…</br-collapse>
+ * ```
  *
- * - **Utilize quando:**
- *   - O conteúdo for extenso, dividido em tópicos independentes e a maioria dos usuários só precisa consultar itens específicos.
- *   - Houver seções complementares opcionais em um formulário longo.
- * - **Evite e prefira outro componente quando:**
- *   - A informação contida for crítica para a tomada de decisão imediata ou segurança da pessoa usuária (ela deve ficar permanentemente visível).
- *   - A intenção for alternar entre diferentes visões de uma mesma tela completa (prefira `br-tab`).
+ * Os ícones de abrir e fechar podem ser trocados por `icon-to-show` e `icon-to-hide`, como propriedade ou como slot.
  *
- * ### Estrutura e Slots
+ * ### Quando usar
  *
- * O `br-collapse` organiza o acionamento e a área expansível:
- * - `trigger`: Slot para personalizar o botão/gatilho de expansão (texto, ícones ou componentes de apoio dentro do summary).
- * - `default`: Slot para inserção do conteúdo que é revelado quando o componente é expandido.
+ * - Perguntas frequentes e conteúdos longos divididos em tópicos.
+ * - Seções opcionais de um formulário longo.
  *
- * 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/collapse?tab=designer).
+ * ### Quando evitar
+ *
+ * - Informação essencial, que precisa ficar sempre visível.
+ * - Alternar entre visões diferentes da mesma tela: use `br-tab`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/collapse?tab=designer).
  *
-
  * @category Conteúdo, Ações
  * @status stable
  * @see br-list
@@ -243,7 +247,7 @@ export class Collapse {
      * Renderiza o <details> com acionador e conteúdo expansível.
      */
     render() {
-        return (h(Host, { key: 'bf10bbff3440e05282b662a3817ccc762eee3404', "color-mode": this.effectiveColorMode }, h("details", { key: '67ef0fec3b7c0b548edcf5c52de258246a91222e', class: `br-collapse direction-${this.effectiveExpansionDirection} trigger-${this.effectiveTriggerVariant}`, open: this.open, onToggle: this.handleCollapse, id: this.customId, part: "details" }, h("summary", { key: '79e0e30c81e131ef858223b671419c48f7ee22a0', class: "trigger", part: "trigger", "aria-controls": `content-${this.customId}` }, this.effectiveIconPosition === 'left' && this.renderIcon(), h("div", { key: 'fa8269d8018635fa489c143169f4017bbdb55801', class: "trigger-content", id: `label-${this.customId}` }, h("slot", { key: '3cf06a920c59b82bb059f21c3f05af6e5a2ba3a6', name: "trigger" })), this.effectiveIconPosition === 'right' && this.renderIcon()), h("div", { key: '16b65ad7f85a12f2c12644e989fb44517defa839', class: "content", id: `content-${this.customId}`, part: "content", "aria-hidden": String(!this.open) }, this.open && this.itemCount > 0 && (h("div", { key: '523b557090ade272ab11a0aba74cf0a35d235200', class: "visually-hidden" }, this.itemCount, " ", this.itemCount === 1 ? 'item' : 'itens', " na lista")), h("slot", { key: '8adfe65ca18650542e04e9621334364ec3cb5690', onSlotchange: (event) => this.updateItemCount(event.currentTarget) })))));
+        return (h(Host, { key: 'bf87bbb4d690a601ad5f553d4def6bbbd5c8b5dd', "color-mode": this.effectiveColorMode }, h("details", { key: '81428822ba3965510209ee82e675b65cc04cd861', class: `br-collapse direction-${this.effectiveExpansionDirection} trigger-${this.effectiveTriggerVariant}`, open: this.open, onToggle: this.handleCollapse, id: this.customId, part: "details" }, h("summary", { key: 'b9104eb5d051cce8fd408ac801783c8d4c467862', class: "trigger", part: "trigger", "aria-controls": `content-${this.customId}` }, this.effectiveIconPosition === 'left' && this.renderIcon(), h("div", { key: 'f8a5f28b34752ae9915e0cd9975b69d55bbc6597', class: "trigger-content", id: `label-${this.customId}` }, h("slot", { key: '16416eb4f7820868802d3e0ce9cd8e484d07a428', name: "trigger" })), this.effectiveIconPosition === 'right' && this.renderIcon()), h("div", { key: 'c3182f117b8900d6910083cb608703a82c5c71c0', class: "content", id: `content-${this.customId}`, part: "content", "aria-hidden": String(!this.open) }, this.open && this.itemCount > 0 && (h("div", { key: 'd27e7a6ef2299759d6c43336a27441e067e54028', class: "visually-hidden" }, this.itemCount, " ", this.itemCount === 1 ? 'item' : 'itens', " na lista")), h("slot", { key: '6b83af04eee3966bee86140bab7c4bfc9db1f9d3', onSlotchange: (event) => this.updateItemCount(event.currentTarget) })))));
     }
     static get is() { return "br-collapse"; }
     static get encapsulation() { return "shadow"; }
@@ -560,7 +564,7 @@ export class Collapse {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido ao expandir."
+                    "text": "Evento emitido ao expandir."
                 },
                 "complexType": {
                     "original": "CollapseChangeDetail",
@@ -607,7 +611,7 @@ export class Collapse {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido ao recolher."
+                    "text": "Evento emitido ao recolher."
                 },
                 "complexType": {
                     "original": "CollapseChangeDetail",

package/dist/collection/components/cookiebar/cookiebar-cookie/cookiebar-cookie.js

@@ -5,23 +5,10 @@
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * O componente `br-cookiebar-cookie` é o subcomponente do GovBR-DS que descreve as especificações técnicas de um cookie individual.
+ * Descreve um cookie dentro de um `br-cookiebar-group`: nome, validade, domínio, empresa responsável, finalidade e descrição.
  *
- * ### Para que serve
+ * Use `cookie-opt-out="false"` quando o cookie não puder ser desativado.
  *
- * - **Transparência técnica:** Detalha nome, validade, finalidade e fornecedor do cookie.
- * - **Esclarecimento ao cidadão:** Oferece visibilidade granular sobre cada elemento de persistência.
- *
- * ### Papel na composição
- *
- * Atua como item folha descritivo na listagem de cookies.
- *
- * ### Regra de uso e relacionamento
- *
- * - Deve ser utilizado exclusivamente dentro de um `br-cookiebar-group`.
- * - Não deve ser utilizado fora do ecossistema de gestão de cookies.
- *
-
  * @slot default - Área livre para inserir conteúdo personalizado abaixo dos itens do cookie.
  *
  * @part card - Container principal do cookie.
@@ -86,7 +73,7 @@ export class CookiebarCookie {
     render() {
         const effectiveOptOut = this.cookieOptOut && !this.isParentGroupAlwaysActive;
         const showAlert = this.alertMessage && !this.cookieSelected && effectiveOptOut;
-        return (h(Host, { key: 'f1bfe31570340e673ef16c14e32a7ea4b3f85091' }, h("div", { key: '4f8678c33e8f057c394f216c91c397cba22c011c', class: this.getCssClassMap(), part: "card" }, h("div", { key: '9c7b5631275bda5355f15ece1ada9946ef9abe51', class: "cookie-details-wrapper", part: "details" }, effectiveOptOut && (h("div", { key: '4f2e7b7ff6a0613846078943ac588c237d8fa088', class: "cookie-switch-area", part: "switch" }, h("br-switch", { key: 'ea24c0344273314b85ed56d95b4ebc56f3953542', checked: this.cookieSelected, labelOn: this.switchOnLabel, labelOff: this.offLabel, name: `cookie-${this.cookieId}`, "aria-label": this.cookieName, hasIcon: true, onCheckedChange: this.handleSwitchChange }))), showAlert && h("br-message", { key: '8f5d4507acbfc02251f282e1db8b7e12ea3e4718', "is-feedback": true, "show-icon": true, state: "warning", message: this.alertMessage }), h("dl", { key: '86c22a0054028d94ef3d0216b1596ec9e2993177', class: "cookie-details", "aria-label": this.cookieName }, this.renderItem(this.cookieNameLabel, this.cookieName), this.renderItem(this.expiresLabel, this.expires), this.renderItem(this.domainLabel, this.domain), this.renderItem(this.enterpriseLabel, this.enterprise), this.renderItem(this.purposeLabel, this.purpose), this.renderItem(this.descriptionLabel, this.description), this.extraLabel && this.extraValue && this.renderItem(this.extraLabel, this.extraValue)), h("slot", { key: '0a3c2e016261c59ecd283721ce1053bd97a21d9d' })))));
+        return (h(Host, { key: '41098a05e7a049d6fe03b767bef29dccc7c5732e' }, h("div", { key: 'ddc0055ee11babc51604aa1789d29b1a97ec0b25', class: this.getCssClassMap(), part: "card" }, h("div", { key: 'c43ee7d0732e78f965d6a88ca47f225c7cae9b36', class: "cookie-details-wrapper", part: "details" }, effectiveOptOut && (h("div", { key: '8250b8d61e36ecbbfd6196fb11a61ee5d2fb5b76', class: "cookie-switch-area", part: "switch" }, h("br-switch", { key: '8e17f26467b6e64cf1a2e5ffc5c120938fadaa9e', checked: this.cookieSelected, labelOn: this.switchOnLabel, labelOff: this.offLabel, name: `cookie-${this.cookieId}`, "aria-label": this.cookieName, hasIcon: true, onCheckedChange: this.handleSwitchChange }))), showAlert && h("br-message", { key: '55fea84621e1b907dc0000baaf5be670e2652a8d', "is-feedback": true, "show-icon": true, state: "warning", message: this.alertMessage }), h("dl", { key: 'afa32651b824141fb29a7168860793c7ed324490', class: "cookie-details", "aria-label": this.cookieName }, this.renderItem(this.cookieNameLabel, this.cookieName), this.renderItem(this.expiresLabel, this.expires), this.renderItem(this.domainLabel, this.domain), this.renderItem(this.enterpriseLabel, this.enterprise), this.renderItem(this.purposeLabel, this.purpose), this.renderItem(this.descriptionLabel, this.description), this.extraLabel && this.extraValue && this.renderItem(this.extraLabel, this.extraValue)), h("slot", { key: '9f71e32be29d3e8d03e3aa4a9bdd2ef1b044fc70' })))));
     }
     static get is() { return "br-cookiebar-cookie"; }
     static get encapsulation() { return "shadow"; }