`) da tabela. Use no slot `body` do `br-table`.\n\nAgrupa as linhas `br-table-row` contendo as células de dados `br-table-cell`.\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o host do componente.\n\n### **CSS Parts:**\n - **body** - Wrapper do corpo da tabela.",
"attributes": [],
"references": []
},
{
"name": "br-table-cell",
"description": "Célula de dados (`| `) da tabela. Use dentro de um `br-table-row` no corpo da tabela.\n\nColoque o conteúdo do registro no slot padrão.\n---\n\n\n### **Events:**\n - **brAlignmentChange** - Evento customizado emitido quando o alinhamento é alterado, permitindo que a célula reaja dinamicamente a mudanças nos tokens de alinhamento.\n- **brOverflowChange** - Evento customizado emitido quando a configuração de overflow é alterada, permitindo que a célula reaja dinamicamente a mudanças no token de overflow.\n\n### **Methods:**\n \n\n- **render(): __** - Renderiza o host do componente.\n\n### **CSS Parts:**\n - **cell** - Wrapper da célula.\n- **content** - Área de conteúdo da célula.",
"attributes": [
{
"name": "horizontal-alignment",
"description": "Define o alinhamento horizontal do conteúdo dentro da célula.",
"values": [{ "name": "TableAlignment" }]
},
{
"name": "vertical-alignment",
"description": "Define o alinhamento vertical do conteúdo dentro da célula.",
"values": [{ "name": "TableAlignment" }]
},
{
"name": "overflow",
"description": "Define se o conteúdo dentro da célula deve ser truncado, permitindo a herança dessa configuração para as células filhas com base no valor definido.",
"values": [{ "name": "TableOverflow" }]
},
{
"name": "tooltip-state",
"description": "Define o estado semântico do tooltip nesta célula.",
"values": [{ "name": "TableTooltipState" }]
},
{
"name": "tooltip-mode",
"description": "Define o modo de resolução do tooltip nesta célula.",
"values": [{ "name": "TableTooltipMode" }]
}
],
"references": []
},
{
"name": "br-table-header",
"description": "Cabeçalho da tabela (`br-table`). Use no slot `header`.\n\nAgrupa as linhas `br-table-row` com as células de cabeçalho `br-table-header-cell`.\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o host do componente.\n\n### **CSS Parts:**\n - **header** - Wrapper do cabeçalho da tabela.",
"attributes": [],
"references": []
},
{
"name": "br-table-header-cell",
"description": "Célula de cabeçalho (` | `) da tabela. Use dentro de um `br-table-row` no cabeçalho.\n\nColoque o título da coluna no slot padrão. Para habilitar ordenação, ative `sortable`.\n---\n\n\n### **Events:**\n - **brColumnWidthChange** - Evento customizado emitido quando a largura da coluna é alterada, permitindo que as células reajam dinamicamente a mudanças no layout.\n- **brAlignmentChange** - Evento customizado emitido quando o alinhamento é alterado, permitindo que a célula de cabeçalho reaja dinamicamente a mudanças nos tokens de alinhamento.\n- **brOverflowChange** - Evento customizado emitido quando a configuração de overflow é alterada, permitindo que a célula de cabeçalho reaja dinamicamente a mudanças no token de overflow.\n\n### **Methods:**\n \n\n\n- **render(): __** - Renderiza o host do componente.\n\n### **CSS Parts:**\n - **cell** - Wrapper da célula de cabeçalho.\n- **content** - Área de conteúdo da célula de cabeçalho.",
"attributes": [
{
"name": "column-width",
"description": "Define a largura da coluna.\nAceita `fill`, `content`, larguras positivas em `px` ou frações positivas em `fr`.\nValores inválidos usam o fallback da tabela.",
"values": [{ "name": "ColumnWidth" }]
},
{
"name": "horizontal-alignment",
"description": "Define o alinhamento horizontal do conteúdo dentro da célula de cabeçalho, permitindo a herança de alinhamento para as células filhas com base no valor definido.",
"values": [{ "name": "TableAlignment" }]
},
{
"name": "vertical-alignment",
"description": "Define o alinhamento vertical do conteúdo dentro da célula de cabeçalho, permitindo a herança de alinhamento para as células filhas com base no valor definido.",
"values": [{ "name": "TableAlignment" }]
},
{
"name": "overflow",
"description": "Define se o conteúdo dentro da célula de cabeçalho deve ser truncado, permitindo a herança dessa configuração para as células filhas com base no valor definido.",
"values": [{ "name": "TableOverflow" }]
},
{
"name": "tooltip-state",
"description": "Define o estado semântico do tooltip nesta coluna/célula de cabeçalho.",
"values": [{ "name": "TableTooltipState" }]
},
{
"name": "tooltip-mode",
"description": "Define o modo de resolução do tooltip nesta coluna/célula de cabeçalho.",
"values": [{ "name": "TableTooltipMode" }]
}
],
"references": []
},
{
"name": "br-table-row",
"description": "Linha horizontal (` | `) da tabela. Use dentro de `br-table-header` ou `br-table-body`.\n\nUse `selected` para indicar que a linha está selecionada.\n---\n\n\n### **Events:**\n - **brAlignmentChange** - Evento customizado emitido quando o alinhamento é alterado, permitindo que as células reajam dinamicamente a mudanças nos tokens de alinhamento.\n- **brOverflowChange** - Evento customizado emitido quando a configuração de overflow é alterada, permitindo que as células reajam dinamicamente a mudanças no token de overflow.\n\n### **Methods:**\n \n\n- **render(): __** - Renderiza o host do componente.\n\n### **CSS Parts:**\n - **row** - Wrapper da linha da tabela.",
"attributes": [
{
"name": "horizontal-alignment",
"description": "Define o alinhamento horizontal das células dentro da linha, permitindo a herança de alinhamento para as células filhas com base no valor definido.",
"values": [{ "name": "TableAlignment" }]
},
{
"name": "vertical-alignment",
"description": "Define o alinhamento vertical das células dentro da linha, permitindo a herança de alinhamento para as células filhas com base no valor definido.",
"values": [{ "name": "TableAlignment" }]
},
{
"name": "overflow",
"description": "Define se o conteúdo dentro das células da linha deve ser truncado, permitindo a herança dessa configuração para as células filhas com base no valor definido.",
"values": [{ "name": "TableOverflow" }]
},
{
"name": "tooltip-state",
"description": "Define o estado semântico do tooltip nas células desta linha.",
"values": [{ "name": "TableTooltipState" }]
},
{
"name": "tooltip-mode",
"description": "Define o modo de resolução do tooltip nas células desta linha.",
"values": [{ "name": "TableTooltipMode" }]
}
],
"references": []
},
{
"name": "br-tag",
"description": "O `br-tag` categoriza, rotula ou destaca informações curtas e metadados.\n\nSuporta modo estático informativo, modo interativo clicável com `action`, modo com botão de fechar (`closable`) e modo selecionável com `selectable`.\n\n```html\nPendente\nConcluído\nFiltro: Brasília\n```\n\n### Quando usar\n\n- Rótulos de estado, tags de categorias ou palavras-chave.\n- Filtros aplicados que podem ser removidos individualmente.\n\n### Quando evitar\n\n- Ações primárias ou envio de formulário: use `br-button`.\n- Contagem numérica pura: use `br-avatar` ou texto de badge.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tag?tab=designer).\n---\n\n\n### **Events:**\n - **radioSelected** - Evento emitido quando a tag é selecionada.\n- **brTagValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise_** - Retorna se a tag selecionável atende às constraints configuradas.\n- **reportValidity(): _Promise_** - Valida e solicita ao navegador a apresentação do erro atual.\n- **setCustomValidity(message: _string_): _Promise_** - Define ou limpa uma mensagem de validade customizada.\n- **validate(): _Promise_** - Executa o validator da tag e retorna se o valor atual é válido.\n- **getValidationState(): _Promise_** - Retorna um snapshot serializável da Constraint Validation API.\n\n### **Slots:**\n - **default** - Slot para inserir o conteúdo da tag, como rótulo ou ícone.\n- **label** - Rótulo customizado da tag. Quando utilizado, a prop `label` é ignorada.\n- **icon** - Ícone customizado da tag. Quando utilizado, a prop `icon` é ignorada.\n- **close-button** - Botão de fechar customizado. Quando utilizado, o botão padrão é substituído.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **tag** - Elemento principal da tag.\n- **input** - Elemento input da tag de seleção.\n- **label** - Rótulo da tag de seleção.\n- **feedback** - Contêiner da mensagem de validação.",
"attributes": [
{
"name": "label",
"description": "A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\nEla é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.",
"values": []
},
{
"name": "icon-name",
"description": "Identificador legado do ícone exibido ao lado do texto.",
"values": []
},
{
"name": "name",
"description": "A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.\nEla é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.",
"values": []
},
{
"name": "value",
"description": "Valor submetido quando a tag selecionável está ativa.",
"values": []
},
{
"name": "validator",
"description": "Regra síncrona ou assíncrona aplicada ao estado, valor e rótulo da tag.",
"values": [{ "name": "TagValidator" }]
},
{
"name": "multiple",
"description": "A tag permite seleção múltipla.",
"values": []
},
{
"name": "selected",
"description": "A tag está selecionada.",
"values": []
},
{
"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": "bg-color",
"description": "A propriedade 'color' permite definir a cor do componente.\nAceita valores como 'red', 'blue', entre outros, e é refletida no DOM.",
"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).\n\nValores inválidos usam `medium`.",
"values": [{ "name": "BrDensity" }]
},
{
"name": "shape",
"description": "A propriedade 'shape' define o formato do componente.",
"values": [{ "name": "TagShape" }]
},
{
"name": "size",
"description": "Define o tamanho personalizado do componente quando o formato for circular (`circle`), arredondado (`rounded`) ou status.\nAceita qualquer valor de tamanho CSS válido (ex: `16px`, `1.5rem`).",
"values": []
},
{
"name": "variant",
"description": "Variante funcional padrão. Aceita `default`, `status`, `action` ou `selectable`.\nValores inválidos são ignorados; nesse caso, os aliases booleanos legados\ncontinuam disponíveis para manter a compatibilidade.",
"values": [{ "name": "TagVariant" }]
},
{
"name": "status",
"description": "Transforma a tag em um indicador de status, com aparência circular.\nÉ flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).",
"values": []
},
{
"name": "interaction",
"description": "Interação deve ser habilitada.",
"values": []
},
{
"name": "interaction-select",
"description": "Interação de seleção deve ser habilitada.",
"values": []
},
{
"name": "disabled",
"description": "Desabilita a interação com o componente.",
"values": []
},
{
"name": "required",
"description": "Exige uma seleção no grupo quando `interaction-select` está ativo.",
"values": []
},
{
"name": "min-selections",
"description": "Quantidade mínima de tags selecionadas no mesmo grupo. Deve ser um inteiro não negativo; valores inválidos usam 0.",
"values": []
},
{
"name": "max-selections",
"description": "Quantidade máxima de tags selecionadas no mesmo grupo. Zero significa sem limite. Deve ser um inteiro não negativo; valores inválidos usam 0.",
"values": []
},
{
"name": "aria-label",
"description": "Define o rótulo acessível usado por tecnologias assistivas.",
"values": []
},
{
"name": "aria-describedby",
"description": "ID do elemento que fornece descrição adicional da tag.\nReferencia um elemento na página que contém informações complementares sobre a tag.\nA descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.\nExemplo: aria-describedby=\"help-status\" onde existe Aguardando aprovação
",
"values": []
}
],
"references": []
},
{
"name": "br-textarea",
"description": "O `br-textarea` captura textos longos em múltiplas linhas em formulários.\n\nConfigure `label`, `placeholder`, `maxlength` e `state` para validação. Use `show-counter` para exibir o contador de caracteres restantes.\n\n```html\n\n```\n\nEm formulários HTML, o componente integra-se via `ElementInternals`, participando da validação nativa com `required`.\n\n### Quando usar\n\n- Mensagens, comentários, justificativas, descrições ou textos extensos.\n\n### Quando evitar\n\n- Dados curtos de linha única (nome, CPF, e-mail): use `br-input`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/textarea?tab=designer).\n---\n\n\n### **Events:**\n - **valueChange** - Valor atualizado do textarea\n- **brTextareaValidationChange** - Informa o início e o resultado do validator; o `detail` contém\n`validating`, `valid` e `message`.\n\n### **Methods:**\n - **checkValidity(): _Promise_** - Retorna `true` se o valor do textarea for válido, caso contrário `false`.\nSe o textarea for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise_** - Retorna `true` se o valor do textarea 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 textarea.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise_** - Executa o validator customizado e retorna se o textarea está válido.\n- **getValidationState(): _Promise_** - Retorna um snapshot serializável da Constraint Validation API.\n- **select(): _Promise_** - Seleciona todo o texto do controle nativo, conforme HTMLTextAreaElement.select().\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectionMode: _SelectionMode_): _Promise_** - Substitui um intervalo de texto usando a API nativa do textarea.\n- **setSelectionRange(start: _number_, end: _number_, direction: _'forward' | 'backward' | 'none'_): _Promise_** - Define o intervalo selecionado no controle nativo.\n- **setValue(newValue: _string_)** - Define um novo valor para o textarea.\n\n### **Slots:**\n - **default** - Slot para texto adicional ou instruções a serem exibidos junto ao textarea.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n- **validation-loading** - Indicador exibido durante validação assíncrona.\n\n### **CSS Parts:**\n - **container** - Contêiner visual principal.\n- **label** - Rótulo do textarea.\n- **textarea** - Elemento textarea nativo.\n- **counter** - Contêiner do contador.\n- **counter-text** - Texto do contador.\n- **helper** - Contêiner do conteúdo auxiliar do slot default.\n- **feedback** - Contêiner da mensagem de validação.",
"attributes": [
{
"name": "value",
"description": "Valor exibido no textarea.\nPode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.",
"values": []
},
{
"name": "label",
"description": "Texto exibido como rótulo do input.",
"values": []
},
{
"name": "placeholder",
"description": "Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.",
"values": []
},
{
"name": "aria-label",
"description": "Texto alternativo para acessibilidade quando não há label visível.\nFornece um rótulo para tecnologias assistivas sem exibir visualmente.",
"values": []
},
{
"name": "custom-id",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.",
"values": []
},
{
"name": "name",
"description": "Nome do campo para identificação no formulário.\nNecessário para participação correta no envio de formulários e integração com frameworks.",
"values": []
},
{
"name": "disabled",
"description": "Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.",
"values": []
},
{
"name": "required",
"description": "Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.",
"values": []
},
{
"name": "readonly",
"description": "Impede edição sem remover o campo do envio do formulário.",
"values": []
},
{
"name": "minlength",
"description": "Número mínimo de caracteres necessário para o valor ser válido. Deve ser um inteiro não negativo; valores inválidos usam 0.",
"values": []
},
{
"name": "maxlength",
"description": "Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\nDeve ser um inteiro não negativo; valores inválidos usam 0.",
"values": []
},
{
"name": "show-counter",
"description": "Mostra o contador com a quantidade máxima de caracteres.",
"values": []
},
{
"name": "state",
"description": "Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'. Valores inválidos não aplicam estado.",
"values": [
{ "name": "danger" },
{ "name": "success" },
{ "name": "warning" }
]
},
{
"name": "feedback-state",
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`; valores inválidos não aplicam estado.",
"values": [
{ "name": "danger" },
{ "name": "success" },
{ "name": "warning" }
]
},
{
"name": "validator",
"description": "Regra síncrona ou assíncrona executada no `change` ou por `validate()`.\nPode consultar um serviço remoto; o componente controla apenas loading,\nvalidade e a precedência do resultado mais recente.",
"values": [{ "name": "InputValidator" }]
},
{
"name": "density",
"description": "Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\nValores inválidos usam `medium`.",
"values": [
{ "name": "small" },
{ "name": "medium" },
{ "name": "large" }
]
},
{
"name": "is-inline",
"description": "Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).",
"values": []
},
{
"name": "inline",
"description": "Exibe rótulo e controle em linha. Quando informada, tem precedência sobre `isInline`.",
"values": []
},
{
"name": "rows",
"description": "Número de linhas visíveis no textarea.\nDefine a altura do componente em relação ao número de linhas de texto exibidas.\nDeve ser um inteiro positivo; valores inválidos são ignorados.",
"values": []
},
{
"name": "cols",
"description": "Número de colunas (caracteres) visíveis no textarea.\nDefine a largura do componente em relação ao número de caracteres por linha.\nDeve ser um inteiro positivo; valores inválidos são ignorados.",
"values": []
},
{
"name": "auto-grow",
"description": "Ajusta automaticamente a altura ao conteúdo sem exibir rolagem vertical.\nQuando ativo, o componente controla a dimensão vertical; `resize=\"vertical\"`\ne `resize=\"both\"` passam a se comportar como `none`, enquanto\n`resize=\"horizontal\"` continua disponível.",
"values": []
},
{
"name": "resize",
"description": "Define os eixos que a pessoa usuária pode redimensionar manualmente.\nQuando omitida, preserva o comportamento nativo atual do navegador.\nValores inválidos são ignorados.",
"values": [{ "name": "TextareaResize" }]
},
{
"name": "wrap",
"description": "Encaminha a política nativa de quebra de linha ao `
![\"\"](\"/imagens/servico.jpg\")
\n ![\"Campanha](\"/imagens/campanha.jpg\")
\n