`) da tabela. Use no slot `body` do `br-table`.
* Agrupa as linhas `br-table-row` contendo as células de dados `br-table-cell`.
*/
interface BrTableBody {
}
/**
* Célula de dados (`| `) da tabela. Use dentro de um `br-table-row` no corpo da tabela.
* Coloque o conteúdo do registro no slot padrão.
*/
interface BrTableCell {
/**
* Define o alinhamento horizontal do conteúdo dentro da célula.
*/
"horizontalAlignment"?: TableAlignment;
/**
* 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.
*/
"overflow"?: TableOverflow;
/**
* Define o modo de resolução do tooltip nesta célula.
*/
"tooltipMode"?: TableTooltipMode;
/**
* Define o estado semântico do tooltip nesta célula.
*/
"tooltipState"?: TableTooltipState;
/**
* Define o alinhamento vertical do conteúdo dentro da célula.
*/
"verticalAlignment"?: TableAlignment;
}
/**
* Cabeçalho da tabela (`br-table`). Use no slot `header`.
* Agrupa as linhas `br-table-row` com as células de cabeçalho `br-table-header-cell`.
*/
interface BrTableHeader {
}
/**
* Célula de cabeçalho (` | `) da tabela. Use dentro de um `br-table-row` no cabeçalho.
* Coloque o título da coluna no slot padrão. Para habilitar ordenação, ative `sortable`.
*/
interface BrTableHeaderCell {
/**
* Define a largura da coluna. Aceita `fill`, `content`, larguras positivas em `px` ou frações positivas em `fr`. Valores inválidos usam o fallback da tabela.
* @example ```html Descrição ```
*/
"columnWidth"?: ColumnWidth;
/**
* 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.
*/
"horizontalAlignment"?: TableAlignment;
/**
* 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.
*/
"overflow"?: TableOverflow;
/**
* Define o modo de resolução do tooltip nesta coluna/célula de cabeçalho.
*/
"tooltipMode"?: TableTooltipMode;
/**
* Define o estado semântico do tooltip nesta coluna/célula de cabeçalho.
*/
"tooltipState"?: TableTooltipState;
/**
* 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.
*/
"verticalAlignment"?: TableAlignment;
}
/**
* Linha horizontal (` | `) da tabela. Use dentro de `br-table-header` ou `br-table-body`.
* Use `selected` para indicar que a linha está selecionada.
*/
interface BrTableRow {
/**
* 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.
*/
"horizontalAlignment"?: TableAlignment;
/**
* 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.
*/
"overflow"?: TableOverflow;
/**
* Define o modo de resolução do tooltip nas células desta linha.
*/
"tooltipMode"?: TableTooltipMode;
/**
* Define o estado semântico do tooltip nas células desta linha.
*/
"tooltipState"?: TableTooltipState;
/**
* 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.
*/
"verticalAlignment"?: TableAlignment;
}
/**
* O `br-tag` categoriza, rotula ou destaca informações curtas e metadados.
* Suporta modo estático informativo, modo interativo clicável com `action`, modo com botão de fechar (`closable`) e modo selecionável com `selectable`.
* ```html
* Pendente
* Concluído
* Filtro: Brasília
* ```
* ### Quando usar
* - Rótulos de estado, tags de categorias ou palavras-chave.
* - Filtros aplicados que podem ser removidos individualmente.
* ### Quando evitar
* - Ações primárias ou envio de formulário: use `br-button`.
* - Contagem numérica pura: use `br-avatar` ou texto de badge.
* Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tag?tab=designer).
* @category Conteúdo, Dados
* @status stable
*/
interface BrTag {
/**
* ID do elemento que fornece descrição adicional da tag. Referencia um elemento na página que contém informações complementares sobre a tag. A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela. Exemplo: aria-describedby="help-status" onde existe Aguardando aprovação
* @default null
*/
"ariaDescribedby": string;
/**
* Define o rótulo acessível usado por tecnologias assistivas.
*/
"ariaLabel": string;
/**
* A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
* @default ''
*/
"bgColor": string;
/**
* Retorna se a tag selecionável atende às constraints configuradas.
*/
"checkValidity": () => Promise;
/**
* Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > **Padrão:** valor único gerado por generateUniqueId().
* @default generateUniqueId()
*/
"customId": string;
/**
* Define a densidade visual do componente. - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento). - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos. - `large`: Baixa densidade (componente maior, mais espaçamento e altura). Valores inválidos usam `medium`.
* @default 'medium'
*/
"density": BrDensity;
/**
* Desabilita a interação com o componente.
* @default false
*/
"disabled": boolean;
/**
* Retorna um snapshot serializável da Constraint Validation API.
*/
"getValidationState": () => Promise;
/**
* Identificador legado do ícone exibido ao lado do texto.
* @deprecated Use o slot `icon` com um SVG, asset ou elemento de ícone controlado pela aplicação.
* @default ''
*/
"iconName": string;
/**
* Interação deve ser habilitada.
* @deprecated Use `variant="action"`.
* @default false
*/
"interaction": boolean;
/**
* Interação de seleção deve ser habilitada.
* @deprecated Use `variant="selectable"`.
* @default false
*/
"interactionSelect": boolean;
/**
* A propriedade 'label' é uma string que representa o texto a ser exibido no componente. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
* @default ''
*/
"label": string;
/**
* 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.
* @default 0
*/
"maxSelections": number;
/**
* Quantidade mínima de tags selecionadas no mesmo grupo. Deve ser um inteiro não negativo; valores inválidos usam 0.
* @default 0
*/
"minSelections": number;
/**
* A tag permite seleção múltipla.
* @default false
*/
"multiple": boolean;
/**
* A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
* @default ''
*/
"name": string;
/**
* Valida e solicita ao navegador a apresentação do erro atual.
*/
"reportValidity": () => Promise;
/**
* Exige uma seleção no grupo quando `interaction-select` está ativo.
* @default false
*/
"required": boolean;
/**
* A tag está selecionada.
* @default false
*/
"selected": boolean;
/**
* Define ou limpa uma mensagem de validade customizada.
*/
"setCustomValidity": (message: string) => Promise;
/**
* A propriedade 'shape' define o formato do componente.
* @default 'default'
*/
"shape": TagShape;
/**
* Define o tamanho personalizado do componente quando o formato for circular (`circle`), arredondado (`rounded`) ou status. Aceita qualquer valor de tamanho CSS válido (ex: `16px`, `1.5rem`).
* @default ''
*/
"size": string;
/**
* Transforma a tag em um indicador de status, com aparência circular. É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
* @deprecated Use `variant="status"`.
* @default false
*/
"status": boolean;
/**
* Executa o validator da tag e retorna se o valor atual é válido.
*/
"validate": () => Promise;
/**
* Regra síncrona ou assíncrona aplicada ao estado, valor e rótulo da tag.
* @example ```js const tag = document.querySelector('br-tag'); tag.validator = ({ selected, label }) => selected ? null : `Selecione a tag ${label}`; ```
*/
"validator"?: TagValidator;
/**
* Valor submetido quando a tag selecionável está ativa.
* @default ''
*/
"value": string;
/**
* Variante funcional padrão. Aceita `default`, `status`, `action` ou `selectable`. Valores inválidos são ignorados; nesse caso, os aliases booleanos legados continuam disponíveis para manter a compatibilidade.
*/
"variant"?: TagVariant;
}
/**
* O `br-textarea` captura textos longos em múltiplas linhas em formulários.
* Configure `label`, `placeholder`, `maxlength` e `state` para validação. Use `show-counter` para exibir o contador de caracteres restantes.
* ```html
*
* ```
* Em formulários HTML, o componente integra-se via `ElementInternals`, participando da validação nativa com `required`.
* ### Quando usar
* - Mensagens, comentários, justificativas, descrições ou textos extensos.
* ### Quando evitar
* - Dados curtos de linha única (nome, CPF, e-mail): use `br-input`.
* Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/textarea?tab=designer).
* @category Formulários
* @status stable
*/
interface BrTextarea {
/**
* Texto alternativo para acessibilidade quando não há label visível. Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
*/
"ariaLabel": string;
/**
* Ajusta automaticamente a altura ao conteúdo sem exibir rolagem vertical. Quando ativo, o componente controla a dimensão vertical; `resize="vertical"` e `resize="both"` passam a se comportar como `none`, enquanto `resize="horizontal"` continua disponível.
* @default false
*/
"autoGrow": boolean;
/**
* Retorna `true` se o valor do textarea for válido, caso contrário `false`. Se o textarea for inválido, dispara um evento 'invalid'.
*/
"checkValidity": () => Promise;
/**
* Número de colunas (caracteres) visíveis no textarea. Define a largura do componente em relação ao número de caracteres por linha. Deve ser um inteiro positivo; valores inválidos são ignorados.
*/
"cols": number;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default generateUniqueId()
*/
"customId": string;
/**
* Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'. Valores inválidos usam `medium`.
* @default 'medium'
*/
"density": 'small' | 'medium' | 'large';
/**
* Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.
* @default false
*/
"disabled": boolean;
/**
* Estado de feedback. Quando informado, tem precedência sobre `state`; valores inválidos não aplicam estado.
*/
"feedbackState"?: 'danger' | 'success' | 'warning';
/**
* Retorna um snapshot serializável da Constraint Validation API.
*/
"getValidationState": () => Promise;
/**
* Exibe rótulo e controle em linha. Quando informada, tem precedência sobre `isInline`.
*/
"inline"?: boolean;
/**
* Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).
* @deprecated Use `inline`.
* @default false
*/
"isInline": boolean;
/**
* Texto exibido como rótulo do input.
*/
"label": string;
/**
* Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite. Deve ser um inteiro não negativo; valores inválidos usam 0.
* @default 0
*/
"maxlength": number;
/**
* 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.
* @default 0
*/
"minlength": number;
/**
* Nome do campo para identificação no formulário. Necessário para participação correta no envio de formulários e integração com frameworks.
*/
"name": string;
/**
* Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.
*/
"placeholder": string;
/**
* Impede edição sem remover o campo do envio do formulário.
* @default false
*/
"readonly": boolean;
/**
* Retorna `true` se o valor do textarea for válido, caso contrário `false`. Se for inválido, exibe a mensagem de erro padrão do navegador.
*/
"reportValidity": () => Promise;
/**
* Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.
* @default false
*/
"required": boolean;
/**
* Define os eixos que a pessoa usuária pode redimensionar manualmente. Quando omitida, preserva o comportamento nativo atual do navegador. Valores inválidos são ignorados.
*/
"resize"?: TextareaResize;
/**
* Número de linhas visíveis no textarea. Define a altura do componente em relação ao número de linhas de texto exibidas. Deve ser um inteiro positivo; valores inválidos são ignorados.
*/
"rows": number;
/**
* Seleciona todo o texto do controle nativo, conforme HTMLTextAreaElement.select().
*/
"select": () => Promise;
/**
* Define uma mensagem de validação customizada para o textarea. Se a mensagem for uma string vazia, o erro customizado é limpo.
*/
"setCustomValidity": (message: string) => Promise;
/**
* Substitui um intervalo de texto usando a API nativa do textarea.
*/
"setRangeText": (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => Promise;
/**
* Define o intervalo selecionado no controle nativo.
*/
"setSelectionRange": (start: number, end: number, direction?: "forward" | "backward" | "none") => Promise;
/**
* Define um novo valor para o textarea.
* @param newValue - O novo valor a ser definido.
*/
"setValue": (newValue: string) => Promise;
/**
* Mostra o contador com a quantidade máxima de caracteres.
* @default false
*/
"showCounter": boolean;
/**
* Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'. Valores inválidos não aplicam estado.
*/
"state": 'danger' | 'success' | 'warning';
/**
* Executa o validator customizado e retorna se o textarea está válido.
*/
"validate": () => Promise;
/**
* Regra síncrona ou assíncrona executada no `change` ou por `validate()`. Pode consultar um serviço remoto; o componente controla apenas loading, validade e a precedência do resultado mais recente.
* @example ```js const textarea = document.querySelector('br-textarea'); textarea.validator = (value) => value.trim().length >= 20 ? null : 'Informe pelo menos 20 caracteres'; ```
*/
"validator"?: InputValidator | string;
/**
* Valor exibido no textarea. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.
* @default ''
*/
"value": string;
/**
* Encaminha a política nativa de quebra de linha ao `
* 
*