{ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json", "version": 1.1, "tags": [ { "name": "br-avatar", "description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/avatar?tab=designer).\n---\n\n\n### **Methods:**\n - **handleDensityChange(newValue: _AvatarDensity_)** - Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\nGarante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n- **setFocus()** - Move o foco programaticamente para o avatar.\n\n### **Slots:**\n - **status** - Conteúdo customizado para o indicador de status. Quando usado, substitui a tag padrão.\n\n### **CSS Parts:**\n - **container** - Elemento externo do avatar.\n- **content** - Conteúdo interno do avatar (imagem, ícone ou texto).\n- **status** - Indicador de status posicionado sobre o avatar.", "attributes": [ { "name": "density", "description": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).\n- `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espaçamento e altura).", "values": [{ "name": "AvatarDensity" }] }, { "name": "custom-id", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "values": [] }, { "name": "src", "description": "URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\nDeve ser uma URL válida que aponta para a imagem desejada.", "values": [] }, { "name": "alt", "description": "Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\nDeve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".", "values": [] }, { "name": "is-iconic", "description": "Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\nÚtil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.", "values": [] }, { "name": "iconic", "description": "Exibe a variação icônica. Quando informada, tem precedência sobre `isIconic`.", "values": [] }, { "name": "text", "description": "Conteúdo textual do avatar.\nApenas o primeiro caractere será exibido em maiúscula.", "values": [] }, { "name": "disabled", "description": "Desabilita a interação com o componente.", "values": [] }, { "name": "bg-color", "description": "Permite definir a cor de fundo do componente.\nAceita os seguintes formatos de cor:\n- Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.\n- Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.\n- Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.\n- Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.\n- Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.\n- Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.\nSe não especificada, usa a cor padrão do tema.", "values": [] }, { "name": "status", "description": "Exibe um indicador de status no avatar.", "values": [] }, { "name": "status-bg-color", "description": "Cor de fundo do indicador de status padrão.", "values": [] }, { "name": "status-label", "description": "Rótulo acessível do indicador de status padrão.", "values": [] }, { "name": "status-size", "description": "Tamanho do indicador de status padrão.", "values": [] }, { "name": "status-position", "description": "Posição do indicador de status sobre o avatar.", "values": [{ "name": "AvatarStatusPosition" }] } ], "references": [] }, { "name": "br-breadcrumb", "description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/breadcrumb?tab=designer).\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Slots:**\n - **default** - Itens de breadcrumb declarados via elementos br-crumb.\n\n### **CSS Parts:**\n - **nav** - Elemento nav do breadcrumb.\n- **list** - Lista ordenada de itens do breadcrumb.", "attributes": [ { "name": "custom-id", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "values": [] }, { "name": "home-url", "description": "Caso não seja fornecido, o valor padrão será /.", "values": [] }, { "name": "home-href", "description": "URL canônica da página inicial. Quando informada, tem precedência sobre `homeUrl`.", "values": [] }, { "name": "crumbs", "description": "Define o array de objetos que receberá os nomes e links do breadcrumb.\nDefine valor padrão do breadcrumb 'defaultCrumbs'.", "values": [{ "name": "BreadcrumbItem[]" }] }, { "name": "navigation-mode", "description": "Controla como os links do breadcrumb integram a navegação mantendo `href` real nos itens navegáveis.\n- `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir.\nCliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos.", "values": [{ "name": "BrNavigationMode" }] } ], "references": [] }, { "name": "br-breadcrumb-item", "description": "Item declarativo canônico de `br-breadcrumb`.\n---\n\n\n### **Events:**\n - **brCrumbPropsChange** - Protocolo compatível com o listener atual do breadcrumb.\n\n### **Slots:**\n - **default** - Conteúdo alternativo do rótulo.", "attributes": [ { "name": "label", "description": "Rótulo do item.", "values": [] }, { "name": "href", "description": "URL do item.", "values": [] }, { "name": "target", "description": "Contexto de navegação.", "values": [] }, { "name": "home", "description": "Identifica o item inicial.", "values": [] }, { "name": "active", "description": "Identifica a página atual.", "values": [] } ], "references": [] }, { "name": "br-crumb", "description": "@deprecated Use `br-breadcrumb-item`.\n\nPara a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/breadcrumb?tab=designer).\n---\n\n\n### **Events:**\n - **brCrumbPropsChange** - Evento disparado quando as propriedades do crumb mudam.\nO componente pai (br-breadcrumb) escuta este evento para se atualizar.\n\n### **Slots:**\n - **default** - Conteúdo alternativo do rótulo do item de navegação.", "attributes": [ { "name": "label", "description": "Rótulo (texto) do crumb.", "values": [] }, { "name": "href", "description": "URL ou caminho para o qual o usuário será direcionado ao clicar no crumb.", "values": [] }, { "name": "target", "description": "Define o alvo do link quando `href` está presente. (ex: _blank, _self).", "values": [] }, { "name": "home", "description": "Define se o crumb é o item inicial (Home).", "values": [] }, { "name": "active", "description": "Define se o crumb é a página atual ativa no breadcrumb.", "values": [] } ], "references": [] }, { "name": "br-button", "description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/button?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Slot para o rótulo ou conteúdo do botão.\n\n### **CSS Parts:**\n - **button** - Parte para o elemento button interno, usada para estilos customizados via ::part(button).", "attributes": [ { "name": "color-mode", "description": "Define se o botão usará um esquema de cores escuro.", "values": [{ "name": "ButtonColorMode" }] }, { "name": "custom-id", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "values": [] }, { "name": "density", "description": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).\n- `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espaçamento e altura).", "values": [{ "name": "ButtonDensity" }] }, { "name": "disabled", "description": "Desabilita a interação com o componente.", "values": [] }, { "name": "emphasis", "description": "Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.", "values": [{ "name": "ButtonEmphasis" }] }, { "name": "is-active", "description": "Indica se o botão está no estado ativo.\nSe definido como verdadeiro, o botão será exibido como ativo.", "values": [] }, { "name": "active", "description": "Estado ativo canônico. Quando informado, tem precedência sobre `isActive`.", "values": [] }, { "name": "is-loading", "description": "Aplica o estado de \"progresso\" ao botão.\nO botão exibirá um indicador de carregamento ou progresso.", "values": [] }, { "name": "loading", "description": "Estado de carregamento canônico. Quando informado, tem precedência sobre `isLoading`.", "values": [] }, { "name": "shape", "description": "Define o formato do botão.", "values": [{ "name": "ButtonShape" }] }, { "name": "type", "description": "Define o tipo de botão, especificando seu comportamento padrão.", "values": [{ "name": "ButtonType" }] }, { "name": "value", "description": "Define o valor inicial do botão em um formulário.", "values": [] }, { "name": "custom-tab-index", "description": "Define o índice de tabulação do botão.\nÚtil para remover o botão da sequência de tabulação (tabindex=\"-1\") quando ele é puramente decorativo ou o foco é gerenciado por um componente pai.", "values": [] }, { "name": "aria-label", "description": "Define o rótulo acessível usado por tecnologias assistivas.", "values": [] }, { "name": "aria-pressed", "description": "Define o estado de pressionado do botão.\nEste atributo é usado para indicar se o botão está atualmente pressionado ou não.\nÉ especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado.\nO valor deve ser 'true' ou 'false'.", "values": [] }, { "name": "aria-expanded", "description": "Indica se um elemento controlado pelo botão está expandido ou recolhido.\nUse em botões que abrem menus, acordeões ou outros painéis expansíveis.\nO valor deve ser 'true' ou 'false'.", "values": [] }, { "name": "aria-controls", "description": "Referência ao ID do elemento que o botão controla.\nUse em conjunto com `ariaExpanded` para relacionar o botão ao painel que ele expande/recolhe.", "values": [] }, { "name": "aria-haspopup", "description": "Indica que o botão abre um menu, listbox, tree, grid ou dialog.\nOs valores permitidos são: 'true', 'menu', 'listbox', 'tree', 'grid' ou 'dialog'.", "values": [{ "name": "AriaHasPopup" }] } ], "references": [] }, { "name": "br-card", "description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/card?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.\n- **media** - Slot para conteúdo de mídia exibido antes do cabeçalho.\n- **header** - Slot para o conteúdo do cabeçalho do card.\n- **content** - Slot para o corpo principal do card ao usar a estrutura de slots.\n- **footer** - Slot para o conteúdo do rodapé do card.\n\n### **CSS Parts:**\n - **wrapper** - Área principal do card.\n- **media** - Área de mídia do card.\n- **header** - Área do cabeçalho.\n- **content** - Área do conteúdo principal.\n- **footer** - Área do rodapé.", "attributes": [ { "name": "custom-id", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "values": [] }, { "name": "disabled", "description": "Desabilita a interação com o componente.", "values": [] }, { "name": "hover", "description": "Define se o card tem hover interativo.\nQuando true, o card terá efeitos visuais ao passar o mouse.", "values": [] }, { "name": "interactive", "description": "Habilita indicação visual de interatividade. Quando informada, tem precedência sobre `hover`.", "values": [] } ], "references": [] }, { "name": "br-carousel", "description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).\n---\n\n\n### **Events:**\n - **brDidPageChange** - Emitido quando o slide ativo muda.\nDisparado por clique nos botões de navegação, clique no indicador de step,\ngesto swipe (apenas em mobile, breakpoint < 576px) ou avanço automático.\n`activePage` é 1-based: o primeiro slide emite `1`, o segundo `2`, e assim por diante.\n- **brCarouselPageChange** - Evento canônico emitido quando o slide ativo muda.\n- **brDidAutoPlayStart** - Emitido quando a reprodução automática é iniciada ou retomada.\n- **brCarouselAutoplayStart** - Evento canônico emitido quando a reprodução automática começa.\n- **brDidAutoPlayPause** - Emitido quando a reprodução automática é pausada.\n- **brCarouselAutoplayPause** - Evento canônico emitido quando a reprodução automática é pausada.\n\n### **Methods:**\n - **onTablistKeydown(e: _KeyboardEvent_)** - Navegação por teclado para o modo tablist (`indicatorType=\"simple\"`).\n\nO W3C APG Carousel Pattern especifica que, quando os controles de seleção de slide\nsão implementados como tabs, a interação de teclado segue o\nhttps://www.w3.org/WAI/ARIA/apg/patterns/tabs/ Tabs Pattern (W3C APG).\nEsse padrão define o comportamento de roving tabindex com as teclas:\n- `ArrowLeft` / `ArrowRight` (ou `ArrowUp` / `ArrowDown`): move o foco entre as tabs.\n- `Home`: move o foco para a primeira tab.\n- `End`: move o foco para a última tab.\n\nO handler está no `br-carousel` (e não no `br-step`) porque a lógica de\n`effectiveCircular` é uma responsabilidade do carrossel, mantendo uma única\nfonte de verdade para a navegação circular.\n\nO evento `keydown` é composto (`composed: true`), portanto borbulha através do\nshadow DOM do `br-step-item` até o host do `br-carousel`.\n- **nextPage(): _Promise_** - Avança para o próximo slide. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`).\n- **previousPage(): _Promise_** - Retorna ao slide anterior. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`).\n- **goToPage(index: _number_): _Promise_** - Navega para o slide de número `index` (1 = primeiro slide, 2 = segundo, …).\nValores fora do intervalo válido são ignorados.\n- **getActivePage(): _Promise_** - Retorna o número do slide atualmente ativo (1 = primeiro slide, 2 = segundo, …).\n- **play(): _Promise_** - Inicia ou retoma a reprodução automática programaticamente.\n- **pause(): _Promise_** - Pausa a reprodução automática programaticamente.\n- **getIsPlaying(): _Promise_** - Retorna `true` se a reprodução automática está ativa no momento.\n\n### **Slots:**\n - **default** - Slot para os slides do carrossel. Aceita exclusivamente elementos `br-carousel-page`.\n\n### **CSS Parts:**\n - **container** - Elemento raiz do carrossel. Recebe `role=\"region\"` e `aria-roledescription=\"carousel\"`.\n- **stage** - Área do palco que contém os slides. Recebe `aria-live` e `aria-atomic`.\n- **nav-prev** - Wrapper do botão de navegação para o slide anterior.\n- **nav-next** - Wrapper do botão de navegação para o próximo slide.\n- **indicator** - Wrapper do indicador de páginas. - Quando `indicatorType=\"simple\"`: renderiza `br-step` em `mode=\"tablist\"`. - Quando `indicatorType=\"textual\"`: renderiza um `span[aria-live]` com \"X/N\".\n- **play-button** - Wrapper do botão de play/pause. Presente apenas quando `autoPlay=true`.", "attributes": [ { "name": "custom-id", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "values": [] }, { "name": "aria-label", "description": "Rótulo acessível do carrossel.\nNão deve conter a palavra \"carrossel\" (W3C APG).\nAtribuído ao `aria-label` do container raiz.", "values": [] }, { "name": "nav-position", "description": "Posição dos botões de navegação (prev/next) em relação ao palco.\n- `outside`: botões ficam nas laterais externas ao palco.\n- `inside`: botões ficam sobrepostos dentro do palco, ocupando toda a altura.", "values": [{ "name": "CarouselNavPosition" }] }, { "name": "indicator-type", "description": "Define o tipo de indicador de páginas renderizado.\n- `simple`: dots usando `br-step` em modo controller.\n- `textual`: texto \"X/N\" com `aria-live`.\n- `none`: sem indicador.", "values": [{ "name": "CarouselIndicatorType" }] }, { "name": "indicator-position", "description": "Posição do indicador de páginas em relação ao palco.\nIgnorada quando `indicatorType=\"none\"`.\n- `outside`: indicador fica abaixo do palco.\n- `inside`: indicador fica sobreposto ao conteúdo.", "values": [{ "name": "CarouselIndicatorPosition" }] }, { "name": "is-circular", "description": "Habilita a navegação circular entre os slides.\nQuando true, os botões \"Anterior\" e \"Próximo\" permanecem sempre habilitados: avançar a partir do último slide retorna ao primeiro, e retroceder a partir do primeiro leva ao último.\nSe autoPlay estiver ativado, o comportamento circular será aplicado automaticamente, independentemente deste valor.", "values": [] }, { "name": "circular", "description": "Habilita navegação circular. Quando informada, tem precedência sobre `isCircular`.", "values": [] }, { "name": "auto-play", "description": "Habilita reprodução automática.\nPausa em hover e foco (W3C). Ativa o loop circular automaticamente.\nNão recomendado em dispositivos móveis.", "values": [] }, { "name": "autoplay", "description": "Habilita reprodução automática. Quando informada, tem precedência sobre `autoPlay`.", "values": [] }, { "name": "interval", "description": "Intervalo em milissegundos entre cada avanço automático.\nSó tem efeito quando `autoPlay=true`.", "values": [] }, { "name": "direction", "description": "Direção de navegação automática do carrossel.\n- `left`: retrocede (vai para o slide anterior).\n- `right`: avança (vai para o próximo slide).\nSó tem efeito quando `autoPlay=true`.", "values": [{ "name": "CarouselDirection" }] }, { "name": "color-mode", "description": "Aplica esquema de cores escuro ao componente.", "values": [{ "name": "CarouselColorMode" }] }, { "name": "mobile-nav", "description": "Exibe botões de navegação em dispositivos móveis.\nPor padrão os botões são ocultados no breakpoint `sm`.", "values": [] }, { "name": "min-height", "description": "Altura mínima do palco do carrossel.\nAceita qualquer valor CSS válido para `min-height` (ex.: `400px`, `50vh`).", "values": [] }, { "name": "height", "description": "Altura do carrossel.\nAceita qualquer valor CSS válido para `height` (ex.: `400px`, `50vh`).", "values": [] }, { "name": "max-width", "description": "Largura máxima do carrossel.\nQuando definido, o componente é centralizado horizontalmente.\nAceita qualquer valor CSS válido para `max-width` (ex.: `800px`, `64rem`).", "values": [] }, { "name": "image-fit", "description": "Ajuste aplicado a imagens filhas diretas de `br-carousel-page`.", "values": [{ "name": "CarouselImageFit" }] } ], "references": [] }, { "name": "br-carousel-page", "description": "## Design System\n\nSubcomponente do `br-carousel`. Representa um slide individual dentro do carrossel.\nDeve ser usado exclusivamente como filho direto de `br-carousel`.\n\nPara a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).\n---\n\n\n### **Methods:**\n - **setLabel(defaultLabel: _string_): _Promise_** - Define o label acessível (`aria-label`) do slide.\n\nChamado pelo `br-carousel` pai para aplicar o label gerado automaticamente\ncom base na posição do slide (ex: `\"Slide 1 de 3\"`).\n\nO `aria-label` declarado diretamente no elemento tem prioridade:\nse o consumidor definir `aria-label` no HTML ou via `setAttribute`,\nesse valor será mantido e o parâmetro `defaultLabel` será ignorado.\n- **setActive(active: _boolean_): _Promise_** - Ativa ou desativa o slide.\n\n### **Slots:**\n - **default** - Qualquer conteúdo: imagens, textos, cards, vídeos, outros componentes do Design System.\n\n### **CSS Parts:**\n - **content** - Wrapper interno do conteúdo do slide.", "attributes": [ { "name": "custom-id", "description": "Identificador único customizável do slide.\nQuando definido, é aplicado diretamente ao atributo `id` do elemento host,\ngarantindo que referências ARIA externas, testes automatizados e âncoras funcionem corretamente.\nO `br-carousel` pai detecta este valor e usa-o também no `controls-id` do indicador de tabs,\nmantendo o vínculo ARIA entre tab e tabpanel automaticamente.", "values": [] }, { "name": "active", "description": "Marca este slide como visível e acessível.\nPode ser usado declarativamente no HTML para definir o slide inicial:\nEm runtime, o `br-carousel` pai gerencia o estado via `setActive()`.", "values": [] } ], "references": [] }, { "name": "br-checkbox", "description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/checkbox?tab=designer).\n---\n\n\n### **Events:**\n - **checkedChange** - Disparado depois que o valor do `checked` foi alterado.\n- **indeterminateChange** - Disparado depois que o valor do `indeterminate` foi alterado.\n- **brCheckboxValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise_** - Retorna `true` se o valor do checkbox for válido, caso contrário `false`.\nSe o checkbox for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise_** - Retorna `true` se o valor do checkbox for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise_** - Define uma mensagem de validação customizada para o checkbox.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise_** - Executa o validator do checkbox e retorna se o valor atual é válido.\n- **getValidationState(): _Promise_** - Retorna um snapshot serializável da Constraint Validation API.\n- **setIndeterminate(value: _boolean_)** - Define o estado indeterminado do checkbox.\n- **toggleChecked()** - @deprecated Atualize a propriedade `checked` diretamente. - Inverte o valor da prop `checked`\n- **setNumberOfChildren(value: _number_)** - Define o número de checkboxes filhos em um grupo de checkboxes.\n\n### **Slots:**\n - **default** - Slot para o rótulo do checkbox, como alternativa à propriedade label.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **container** - Contêiner visual do checkbox.\n- **input** - Elemento input nativo do checkbox.\n- **label** - Rótulo do checkbox.\n- **feedback** - Contêiner da mensagem de validação.", "attributes": [ { "name": "indeterminate", "description": "Define o estado intermediário do checkbox.\nQuando verdadeiro, exibe uma marcação parcial visual que indica seleção parcial.\nÚtil para representar grupos onde alguns itens estão selecionados, mas não todos.\nAo clicar no checkbox neste estado, ele será automaticamente alterado para marcado.", "values": [] }, { "name": "checked", "description": "Define o estado de seleção do checkbox.\nSe definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "disabled", "description": "Desativa o checkbox, tornando-o não interativo.", "values": [] }, { "name": "required", "description": "Se verdadeiro, o checkbox é obrigatório e deve ser marcado antes que o formulário possa ser enviado.", "values": [] }, { "name": "validator", "description": "Regra síncrona ou assíncrona aplicada ao estado booleano do checkbox.", "values": [{ "name": "CheckboxValidator" }] }, { "name": "has-hidden-label", "description": "Define se o label associado ao checkbox deve ser oculto.\nSe definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.", "values": [] }, { "name": "label-hidden", "description": "Oculta visualmente o rótulo. Quando informada, tem precedência sobre `hasHiddenLabel`.", "values": [] }, { "name": "label", "description": "Texto descritivo exibido à direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.", "values": [] }, { "name": "name", "description": "Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo.\nO valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.", "values": [] }, { "name": "state", "description": "Indica a validade do checkbox.\nSe não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.", "values": [{ "name": "valid" }, { "name": "invalid" }] }, { "name": "feedback-state", "description": "Estado de feedback canônico. Quando informado, tem precedência sobre `state`.", "values": [{ "name": "valid" }, { "name": "invalid" }] }, { "name": "value", "description": "Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`
`).\nEsse valor é enviado com o formulário quando o checkbox está selecionado.\n**Nota:** Esta propriedade não deve ser utilizada para determinar se o checkbox está selecionado; para verificar o estado de seleção, use a propriedade `checked`.", "values": [] }, { "name": "is-father", "description": "Indica se o checkbox é pai de um grupo de checkboxes.", "values": [] } ], "references": [] }, { "name": "br-checkbox-group", "description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Slot para adicionar os checkboxes controlados pelo grupo.", "attributes": [ { "name": "label", "description": "Texto descritivo do grupo.", "values": [] }, { "name": "unselect-all-label", "description": "Rótulo para desmarcar todos os checkboxes.", "values": [] }, { "name": "select-all-label", "description": "Rótulo para marcar todos os checkboxes.", "values": [] }, { "name": "indeterminate", "description": "Define o estado indeterminado inicial do grupo.", "values": [] }, { "name": "orientation", "description": "Orientação visual das opções.", "values": [{ "name": "horizontal" }, { "name": "vertical" }] }, { "name": "custom-id", "description": "Identificador único do controlador.", "values": [] } ], "references": [] }, { "name": "br-checkgroup", "description": "@deprecated Use `br-checkbox-group`.\n\n\n---\n\n\n### **Slots:**\n - **default** - Slot para adicionar os checkboxes controlados pelo grupo.", "attributes": [ { "name": "label", "description": "Texto descritivo do grupo.", "values": [] }, { "name": "label-selecionado", "description": "Rótulo legado para desmarcar todos.", "values": [] }, { "name": "unselect-all-label", "description": "Rótulo para desmarcar todos.", "values": [] }, { "name": "label-desselecionado", "description": "Rótulo legado para marcar todos.", "values": [] }, { "name": "select-all-label", "description": "Rótulo para marcar todos.", "values": [] }, { "name": "indeterminate", "description": "Estado indeterminado inicial.", "values": [] }, { "name": "custom-id", "description": "Identificador legado do controlador.", "values": [] } ], "references": [] }, { "name": "br-collapse", "description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/collapse?tab=designer).\n---\n\n\n### **Events:**\n - **brDidOpen** - Emitido ao expandir, com o identificador e o grupo de accordion.\n- **brCollapseOpen** - Evento canônico emitido ao expandir.\n- **brDidClose** - Emitido ao recolher, com o identificador e o grupo de accordion.\n- **brCollapseClose** - Evento canônico emitido ao recolher.\n\n### **Methods:**\n - **openCollapse()** - @deprecated Atualize a propriedade `open`. - Abre o collapse programaticamente.\n- **closeCollapse()** - @deprecated Atualize a propriedade `open`. - Fecha o collapse programaticamente.\n- **toggle(): _Promise_** - Alterna o estado aberto.\nO elemento também redispara o evento nativo `toggle` no host; essa ocorrência é sintética (`isTrusted === false`).\n- **render()** - Renderiza o
com acionador e conteúdo expansível.\n\n### **Slots:**\n - **default** - Slot para o conteúdo expansível exibido ao abrir o collapse.\n- **trigger** - Slot para personalizar o acionador (texto, ícones, imagens, etc.).\n\n### **CSS Parts:**\n - **details** - Elemento details nativo do collapse.\n- **trigger** - Acionador (summary) do collapse.\n- **content** - Área de conteúdo expansível.", "attributes": [ { "name": "custom-id", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "values": [] }, { "name": "open", "description": "Controla se o collapse está aberto.", "values": [] }, { "name": "divider", "description": "Indica se o componente possui um divisor (divider) inferior.", "values": [] }, { "name": "accordion-group", "description": "Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez entre os irmãos\ndo mesmo pai imediato.", "values": [] }, { "name": "icon-to-show", "description": "Classe CSS do ícone exibido quando o conteúdo está oculto.", "values": [] }, { "name": "icon-to-hide", "description": "Classe CSS do ícone exibido quando o conteúdo está visível.", "values": [] }, { "name": "icon-position", "description": "Define a posição do ícone no acionador: 'left' ou 'right'.", "values": [{ "name": "CollapseIconPosition" }] }, { "name": "use-icons", "description": "Controla se o identificador visual de expansão/retração será renderizado.", "values": [] }, { "name": "expansion-direction", "description": "Direção em que o conteúdo é expandido e para a qual o ícone aponta.", "values": [{ "name": "CollapseExpansionDirection" }] }, { "name": "color-mode", "description": "Tema visual do Collapse/Accordion.", "values": [{ "name": "CollapseColorMode" }] }, { "name": "trigger-variant", "description": "Forma visual do acionador sem alterar sua semântica nativa.", "values": [{ "name": "CollapseTriggerVariant" }] } ], "references": [] }, { "name": "br-cookiebar", "description": "Componente de gestão de consentimento de cookies (LGPD), obrigatório em sites e aplicativos do\nGoverno Federal que coletam dados de usuários.\n\nApresenta duas etapas visuais:\n- **default** – barra inferior com texto informativo e botões de ação;\n- **open** – painel de tela cheia com lista de classes de cookies configuráveis.\n\nA persistência do consentimento é responsabilidade do consumidor: ouça o evento\n`brCookiebarAccept` e armazene o payload onde desejar (localStorage, cookie HTTP, API etc.).\n\nPara a documentação completa, consulte o [Design System do GovBR](https://www.gov.br/ds/components/cookiebar?tab=designer).\n---\n\n\n### **Events:**\n - **brCookiebarShow** - Emitido quando o componente se torna visível (`show` → true).\n- **brCookiebarHide** - Emitido quando o componente é ocultado (`show` → false).\n- **brCookiebarOpen** - Emitido quando o painel expande para modo open.\n- **brCookiebarClose** - Emitido quando o painel recolhe para modo default.\n- **brCookiebarAccept** - Sinal emitido quando o usuário clica em Aceitar.\nNão carrega payload — ouça `brCookiebarResponse` para obter o estado completo de consentimento.\n- **brCookiebarReject** - Sinal emitido quando o usuário clica em \"Rejeitar não obrigatórios\".\nNão carrega payload — ouça `brCookiebarResponse` para obter o estado completo de consentimento.\n- **brCookiebarResponse** - Emitido após `brCookiebarAccept` ou `brCookiebarReject`, com o estado final de consentimento.\nÉ o único evento que carrega `CookiebarOutputData` — use-o para persistir o consentimento\n(localStorage, cookie HTTP, API etc.).\nNão é disparado durante interações com checkboxes e switches internos.\n- **brCookiebarPolicyClick** - Emitido quando o usuário clica no botão secundário no modo opt-in (`allOptOut=false`).\nO consumidor é responsável por navegar para a página de Política de Cookies.\n\n### **Methods:**\n - **handleShowChange(newValue: _boolean_)** - Observa mudanças em `show`.\nAo exibir o componente, garante que o modo inicial seja sempre `default` e emite `brCookiebarShow`.\nCom `scrim=true`, aplica `inert` nos irmãos e registra o trap de foco.\nCom `scrim=false`, o usuário pode navegar livremente pela página (WCAG 2.1.2).\nAo ocultar, emite `brCookiebarHide`.\n- **handleModeChange(newValue: _CookiebarMode_)** - Observa mudanças em `mode`.\nAo entrar em modo `open`, emite `brCookiebarOpen`, aplica `inert` nos irmãos e move o foco\npara o botão fechar (trap focus modal).\nAo sair do modo `open`, emite `brCookiebarClose` e — se `scrim=true` — reaplica `inert`\ne o listener de trap para o painel default. Sem scrim, nenhum trap é ativado.\n- **handleSelectAllPropChange(newValue: _boolean_)** - Observa mudanças externas na prop `selectAll`.\nSincroniza o estado interno do checkbox e propaga o valor para todos os grupos opt-out.\n- **handleGroupChange()** - Escuta o evento `brCookiebarGroupChange` emitido por qualquer `br-cookiebar-group` filho.\nApenas recalcula o estado visual do checkbox \"Selecionar tudo\" — não emite `brCookiebarResponse`.\nO evento de resposta completo é emitido somente ao clicar em Aceitar ou Rejeitar.\n- **openDefault(): _Promise_** - Exibe o cookiebar no modo `default` (barra inferior).\n- **openPanel(): _Promise_** - Exibe o cookiebar diretamente no modo `open` (painel de tela cheia).\n- **close(): _Promise_** - Oculta o cookiebar.\n- **getSelectedCookies(): _Promise_** - Retorna o JSON com o estado atual de seleção de todos os grupos e cookies.\n\n### **Slots:**\n - **default** - Recebe os subcomponentes `br-cookiebar-group`, `br-cookiebar-note-group` e `br-cookiebar-note`.\n- **header** - Recebe `br-cookiebar-header` ou HTML livre.\n- **links** - Recebe links complementares (`br-cookiebar-link` ou elementos `` livres).\n- **actions** - Recebe botões de ação. Se vazio, o componente renderiza os botões padrão.\n\n### **CSS Parts:**\n - **container** - Container raiz do componente.\n- **default-panel** - Painel fechado (modo default).\n- **open-panel** - Painel expandido (modo open).\n- **header** - Cabeçalho do painel aberto.\n- **body** - Corpo do painel aberto (com rolagem).\n- **footer** - Rodapé com botões de ação.\n- **scrim** - Camada de sobreposição opcional.", "attributes": [ { "name": "custom-id", "description": "Identificador único; gerado automaticamente quando omitido.", "values": [] }, { "name": "show", "description": "Controla a visibilidade do componente.\nO consumidor é responsável por definir este valor com base na persistência do consentimento\n(ex: verificar se já existe um cookie de consentimento salvo).", "values": [] }, { "name": "mode", "description": "Estado visual atual do painel.\n- `default`: barra inferior com texto e botões.\n- `open`: painel de tela cheia com grupos de cookies configuráveis.", "values": [{ "name": "CookiebarMode" }] }, { "name": "all-opt-out", "description": "Define se o cookiebar opera no padrão opt-out (`true`, recomendado) ou opt-in (`false`).\n- **opt-out** (`true`): botão secundário \"Definir Cookies\"; usuário pode configurar cookies.\n- **opt-in** (`false`): botão secundário \"Ver Política de Cookies\"; painel é somente leitura.", "values": [] }, { "name": "info-text", "description": "Texto informativo exibido na barra inferior (modo default), descrevendo a política de cookies.", "values": [] }, { "name": "accept-button", "description": "Texto do botão primário de aceite. Padrão: `Aceitar`.", "values": [] }, { "name": "reject-button", "description": "Texto do botão de rejeição dos cookies não obrigatórios.\nExibido apenas quando `show-reject-button=\"true\"`.", "values": [] }, { "name": "show-reject-button", "description": "Quando `true`, exibe o botão \"Rejeitar não obrigatórios\" nos painéis default e open.\nCookies de grupos com `group-opt-out=\"false\"` (sempre ativos) não são afetados.", "values": [] }, { "name": "opt-out-button", "description": "Texto do botão secundário quando `all-opt-out=\"true\"`.", "values": [] }, { "name": "opt-in-button", "description": "Texto do botão secundário quando `all-opt-out=\"false\"`.", "values": [] }, { "name": "close-label", "description": "`aria-label` do botão fechar exibido no canto do painel expandido (`mode=\"open\"`).\nPermite traduzir o rótulo para outros idiomas.", "values": [] }, { "name": "panel-label", "description": "`aria-label` do painel expandido (`mode=\"open\"`), que possui `role=\"dialog\"`.\nLeitores de tela anunciam este texto ao entrar no diálogo modal de configuração de cookies.\nDeve descrever o propósito do diálogo de forma sucinta (ex: \"Configurações de cookies\").", "values": [] }, { "name": "default-panel-label", "description": "`aria-label` da barra de aviso de cookies (`mode=\"default\"`).\nDeve descrever o propósito da região de forma sucinta (ex: \"Aviso de cookies\").", "values": [] }, { "name": "cookie-groups-label", "description": "Rótulo do título da seção de grupos de cookies.", "values": [] }, { "name": "links-label", "description": "`aria-label` do elemento `