@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
1,147 lines (1,146 loc) • 252 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { HorizontalAlign } from "./utils/types";
export { HorizontalAlign } from "./utils/types";
export namespace Components {
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).
* @example ```html
* <br-avatar src="/img/avatar.png" alt="Usuário"></br-avatar>
* ```
*/
interface BrAvatar {
/**
* Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade. Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: "Foto de perfil de João Silva".
* @default 'Foto de perfil do usuário'
*/
"alt": "Foto de perfil do usuário";
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-avatar-${avatarId++}`
*/
"customId": string;
/**
* Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
* @default 'medium'
*/
"density": 'small' | 'medium' | 'large';
/**
* Define se o avatar está desabilitado
* @default false
*/
"disabled": false;
/**
* Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem). Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.
* @default false
*/
"isIconic": boolean;
/**
* URL da imagem a ser exibida no avatar do tipo 'fotográfico'. Deve ser uma URL válida que aponta para a imagem desejada.
*/
"src": string;
/**
* Conteúdo textual do avatar. Apenas o primeiro caractere será exibido em maiúscula.
*/
"text": string;
/**
* Cor de fundo personalizada para o avatar do tipo texto
*/
"textBackgroundColor": string;
}
interface BrBreadcrumb {
/**
* Define o array de objetos que receberá os nomes e links do breadcrumb. Define valor padrão do breadcrumb 'defaultCrumbs'.
*/
"crumbs": string | BreadcrumbItem[];
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-breadcrumb-${breadcrumbId++}`
*/
"customId": string;
/**
* URL para home. Caso não seja fornecido, o valor padrão será /.
* @default '/'
*/
"homeUrl": string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).
* @example Uso básico:
* ```html
* <br-button id="meu-botao" emphasis="primary">Clique aqui</br-button>
* ```
* @example Customizando com CSS Parts:
* ```css
* .meu-botao::part(button) {
* padding: 1rem 2rem;
* border-radius: 8px;
* }
* ```
* **Atenção**:
* - `margin` aplicado diretamente ao `<br-button>` é seguro para espaçamento externo e **não afeta a área clicável** do botão. Pode ser usado para separar o botão de outros elementos.
* - `padding` aplicado diretamente ao `<br-button>` **expande a área clicável** além do botão visível, pois o host do componente recebe o padding. Para espaçamento interno, use as propriedades do componente (`density`, `shape`) ou estilize via `::part(button)`.
* - Recomenda-se o uso de `margin` para espaçamento externo e `padding` via `::part(button)` para espaçamento interno.
* @example Layout externo (para espaçamento entre componentes):
* ```html
* <br-button class="m-3" emphasis="primary">Botão com margin</br-button>
* ```
* @example Layout externo (para espaçamento entre componentes):
* ```html
* <div class="wrapper">
* <br-button emphasis="primary">Botão</br-button>
* </div>
* ```
* ```css
* .wrapper {
* margin: 1rem;
* }
* ```
*/
interface BrButton {
/**
* Define o rótulo acessível do botão. Este rótulo é usado por tecnologias assistivas para descrever a função do botão. É especialmente importante para botões com formato circular, onde o texto pode não ser visível. Se o botão não tiver um rótulo acessível, uma mensagem de aviso será exibida no console.
*/
"ariaLabel": string;
/**
* Define o estado de pressionado do botão. Este atributo é usado para indicar se o botão está atualmente pressionado ou não. É especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado. O valor deve ser 'true' ou 'false'.
*/
"ariaPressed": string;
/**
* Define se o botão usará um esquema de cores escuro.
*/
"colorMode": 'dark';
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-button-${buttonId++}`
*/
"customId": string;
/**
* Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
* @default 'medium'
*/
"density": 'large' | 'medium' | 'small';
/**
* Desativa o botão, tornando-o não interativo.
* @default false
*/
"disabled": boolean;
/**
* Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.
*/
"emphasis": 'primary' | 'secondary' | 'tertiary';
/**
* Indica se o botão está no estado ativo. Se definido como verdadeiro, o botão será exibido como ativo.
* @default false
*/
"isActive": boolean;
/**
* Aplica o estado de "progresso" ao botão. O botão exibirá um indicador de carregamento ou progresso.
* @default false
*/
"isLoading": boolean;
/**
* Define o formato do botão. Valores possíveis: - 'circle': Botão com formato circular. - 'block': Botão com formato ovalado ocupando toda a largura disponível. - 'pill': Botão com formato ovalado, com bordas arredondadas.
*/
"shape": 'circle' | 'block' | 'pill';
/**
* Define o tipo de botão, especificando seu comportamento padrão. Valores possíveis: - 'button': Um botão padrão. - 'reset': Um botão para redefinir o formulário. - 'submit': Um botão para enviar o formulário.
*/
"type": 'button' | 'reset' | 'submit';
/**
* Define o valor inicial do botão em um formulário.
*/
"value": string;
}
/**
* O componente Card é um container versátil para apresentação de conteúdo estruturado.
* Suporta cabeçalho, conteúdo principal e rodapé, além de diferentes estilos visuais.
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/card?tab=designer).
*/
interface BrCard {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-card-${brCardId++}`
*/
"customId": string;
/**
* Define se o card está desabilitado. Quando true, o card fica com opacidade reduzida e não responde a interações.
* @default false
*/
"disabled": boolean;
/**
* Define se o card tem hover interativo. Quando true, o card terá efeitos visuais ao passar o mouse.
* @default false
*/
"hover": boolean;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/checkbox?tab=designer).
* @example ```html
* <br-checkbox label="Aceito os termos"></br-checkbox>
* ```
*/
interface BrCheckbox {
/**
* Define o estado de seleção do checkbox. Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.
* @default false
*/
"checked": boolean;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-checkbox-${checkboxId++}`
*/
"customId": string;
/**
* Desativa o checkbox, tornando-o não interativo.
* @default false
*/
"disabled": boolean;
/**
* Define se o label associado ao checkbox deve ser oculto. Se definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.
* @default false
*/
"hasHiddenLabel": boolean;
/**
* Define o estado intermediário do checkbox. Quando verdadeiro, exibe uma marcação parcial visual que indica seleção parcial. Útil para representar grupos onde alguns itens estão selecionados, mas não todos. Ao clicar no checkbox neste estado, ele será automaticamente alterado para marcado.
* @default false
*/
"indeterminate": boolean;
/**
* Texto descritivo exibido à direita do checkbox. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.
*/
"label": string;
/**
* Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.
*/
"name": string;
/**
* Define o estado indeterminado do checkbox.
* @param value Novo valor para o estado indeterminado.
*/
"setIndeterminate": (value: boolean) => Promise<void>;
/**
* Indica a validade do checkbox. Valores possíveis: 'valid': O checkbox é considerado válido. 'invalid': O checkbox é considerado inválido. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.
*/
"state": 'valid' | 'invalid';
/**
* Inverte o valor da prop `checked`
*/
"toggleChecked": () => Promise<void>;
/**
* Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o checkbox está selecionado. **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`.
*/
"value": string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/utilitarios/js/checkgroup?tab=desenvolvedor).
* @example ```html
* <br-checkgroup label="Opções">
* <br-checkbox label="A"></br-checkbox>
* <br-checkbox label="B"></br-checkbox>
* </br-checkgroup>
* ```
*/
interface BrCheckgroup {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-checkgroup-${checkgroupId++}`
*/
"customId": string;
/**
* Define o estado intermediário do checkbox. Se definido como verdadeiro, o checkbox exibirá um estado intermediário, que é um estado visual que indica que a opção está parcialmente selecionada. Este estado é útil quando o checkbox faz parte de um grupo com seleção parcial.
* @default false
*/
"indeterminate": boolean;
/**
* Texto descritivo do grupo.
*/
"label": string;
/**
* Define o texto do label quando o checkbox está desmarcado.
* @default 'Selecionar tudo'
*/
"labelDesselecionado": string;
/**
* Define o texto do label quando o checkbox está marcado.
* @default 'Desselecionar tudo'
*/
"labelSelecionado": string;
}
/**
* O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.
* - Collapse simples: Cada instância funciona de forma independente, permitindo abrir ou fechar o conteúdo conforme necessário, sem impactar outros componentes na página.
* - Accordion: Quando configurado com a propriedade `accordionGroup`, múltiplos componentes `br-collapse` são agrupados. Nesse caso, apenas um item pode estar expandido por vez. Ao abrir um novo item, o anteriormente expandido será automaticamente fechado.
* @example ```html
* <br-collapse open>
* <div slot="trigger">Clique para expandir</div>
* <div>Conteúdo expansível</div>
* </br-collapse>
* ```
*/
interface BrCollapse {
/**
* Define se o collapse faz parte de um accordion
* @default null
*/
"accordionGroup"?: string;
/**
* Método público para fechar. Este método pode ser chamado externamente para fechar o componente.
*/
"closeCollapse": () => Promise<void>;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId('clp')
*/
"customId": string;
/**
* Define a posição do ícone: 'left' ou 'right'
* @default 'right'
*/
"iconPosition": 'left' | 'right';
/**
* Classe CSS para o ícone de recolhimento
* @default 'fa6-solid:chevron-up'
*/
"iconToHide": string;
/**
* Classe CSS para o ícone de expansão
* @default 'fa6-solid:chevron-down'
*/
"iconToShow": string;
/**
* Define se o collapse está aberto ou fechado.
* @default false
*/
"open": boolean;
/**
* Método público para abrir. Este método pode ser chamado externamente para abrir o componente.
*/
"openCollapse": () => Promise<void>;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/divider?tab=designer).
*/
interface BrDivider {
/**
* Alinhamento do conteúdo do divisor. Pode ser 'start', 'center' ou 'end'.
* @default undefined
*/
"align": DividerAlign;
/**
* Define se o divisor deve "sangrar" (bleed) nas laterais, ou seja, se deve ocupar toda a largura do container pai. Isso é útil quando o divisor precisa se estender além do padding do container pai.
* @default false
*/
"bleed": boolean;
/**
* Define o estilo da borda do divisor. Pode ser 'dashed' ou 'solid'.
* @default solid
*/
"borderStyle": DividerBorderStyle;
/**
* Cor do divisor. Pode ser uma cor hexadecimal, RGB ou nome de cor CSS. Se não for especificada, o divisor usará a cor padrão definida pelo tema.
* @default null
*/
"color": string;
/**
* ID personalizado para o elemento, útil para acessibilidade e identificação única. Se não for fornecido, um ID único será gerado automaticamente.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* Define se o divisor deve ser exibido no modo escuro.
* @default false
*/
"isDarkMode": boolean;
/**
* Define o margin bottom do divisor em pixels. Se não for especificado, usa o valor padrão de 20px para horizontal e 0px para vertical.
* @default null
*/
"marginBottom": number;
/**
* Define o margin left do divisor em pixels. Se não for especificado, usa o valor padrão de 0px para horizontal e 10px para vertical.
* @default null
*/
"marginLeft": number;
/**
* Define o margin right do divisor em pixels. Se não for especificado, usa o valor padrão de 0px para horizontal e 10px para vertical.
* @default null
*/
"marginRight": number;
/**
* Define o margin top do divisor em pixels. Se não for especificado, usa o valor padrão de 20px para horizontal e 0px para vertical.
* @default null
*/
"marginTop": number;
/**
* Define a orientação do divisor. Pode ser 'horizontal' ou 'vertical'. Caso seja usado como vertical, o divider deve ser colocado dentro de um container com altura definida.
* @default horizontal
*/
"orientation": DividerOrientation;
/**
* Define a espessura do divisor. Pode ser 'small', 'medium' ou 'large'.
* @default small
*/
"thickness": DividerThickness;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/dropdown?tab=designer).
*/
interface BrDropdown {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* Esconde o dropdown. Define a propriedade `isOpen` como falsa e retorna o novo estado. Este método pode ser chamado externamente.
*/
"hide": () => Promise<{ isOpen: boolean; }>;
/**
* Indica se o dropdown está aberto ou fechado. Esta propriedade é refletida no DOM e pode ser alterada externamente. O valor padrão é falso (fechado).
* @default false
*/
"isOpen": boolean;
/**
* Abre o dropdown. Define a propriedade `isOpen` como verdadeira e retorna o novo estado. Este método pode ser chamado externamente.
*/
"open": () => Promise<{ isOpen: boolean; }>;
/**
* Define o posicionamento do target (alvo) em relação ao trigger (acionador). Valores possíveis: 'bottom-start' (padrão), 'bottom-end', 'top-start', 'top-end', 'left', 'right', 'bottom', 'top'.
* @default 'bottom-start'
*/
"placement": | 'bottom-start'
| 'bottom-end'
| 'top-start'
| 'top-end'
| 'left'
| 'right'
| 'bottom'
| 'top';
/**
* Define se o dropdown deve permanecer aberto quando outro dropdown é aberto. Quando definido como false (padrão), o dropdown será fechado automaticamente quando outro dropdown for aberto. Quando definido como true, o dropdown permanecerá aberto mesmo quando outro dropdown for aberto.
* @default false
*/
"preventAutoDismiss": boolean;
/**
* Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
*/
"setFocus": () => Promise<void>;
/**
* Define o z-index do elemento target (alvo) do dropdown. Permite customizar a ordem de sobreposição do painel dropdown em relação aos demais elementos da página. O valor padrão utiliza a variável CSS do design system: var(--z-index-layer-1).
* @default 'var(--z-index-layer-1)'
*/
"targetZIndex": string;
}
/**
* O componente `br-footer` representa o rodapé do site, de acordo com a documentação de design do GovBR.
* Ele é composto por vários subcomponentes, como [`br-footer-category`](/docs/components/footer-category), [`br-footer-item`](/docs/components/footer-item), [`br-footer-social`](/docs/components/footer-social), [`br-footer-legal`](/docs/components/footer-legal) e [`br-logo`](/docs/components/footer-logo).
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/footer?tab=designer).
* @example ```html
* <br-footer theme="dark">
* <br-footer-category label="Mapa do Site">
* <br-footer-item href="/docs">Documentação</br-footer-item>
* </br-footer-category>
* </br-footer>
* ```
*/
interface BrFooter {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* Texto de descrição das redes sociais.
* @default 'Redes Sociais'
*/
"socialNetworkTitle": string;
/**
* Indica o tema do rodapé.
* @default 'dark'
*/
"theme": 'dark' | 'light';
}
/**
* O subcomponente `br-footer-category` representa o mapa do site, de acordo com a documentação de design do GovBR.
* O `br-footer-category` deve ser utilizado com filho direto do componente [`br-footer`](/docs/components/footer) e possui um slot para os itens da categoria.
* Esses itens são representados pelo componente [`br-footer-item`](/docs/components/footer-item).
* O componente `br-footer-category` é responsivo e se adapta a diferentes tamanhos de tela.
* Em telas menores, ele se comporta como um accordion, enquanto em telas maiores, ele é exibido como uma lista.
* @example ```html
* <br-footer>
* <br-footer-category label="Links úteis">
* <br-footer-item href="/docs">Documentação</br-footer-item>
* </br-footer-category>
* </br-footer>
* ```
*/
interface BrFooterCategory {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* Título da lista.
* @default ''
*/
"label": string;
}
/**
* O subcomponente `br-footer-item` deve ser utilizado juntamente com o subcomponente [`br-footer-category`](/docs/components/footer-category) para representar os itens dentro de uma categoria no rodapé.
* De acordo com o a documentação de design do GovBR, esses dois subcomponentes formam o mapa do site.
* Portanto sob esse contexto, o `br-footer-item` representa uma página no site.
* O `br-footer-item` deve ser utilizado como filho direto do componente [`br-footer-category`](/docs/components/footer-category).
* ## Uso em SPAs (Single Page Applications)
* Para Single Page Applications, recomenda-se usar o slot para passar o componente de roteamento específico do framework:
* ### React Router:
* ```html
* <br-footer-item>
* <Link to="/pagina">Nome da Página</Link>
* </br-footer-item>
* ```
* ### Vue Router:
* ```html
* <br-footer-item>
* <router-link to="/pagina">Nome da Página</router-link>
* </br-footer-item>
* ```
* ### Angular Router:
* ```html
* <br-footer-item>
* <a routerLink="/pagina">Nome da Página</a>
* </br-footer-item>
* ```
* ### Next.js:
* ```html
* <br-footer-item>
* <Link href="/pagina">Nome da Página</Link>
* </br-footer-item>
* ```
* **Nota:** Quando usar o slot para SPAs, não defina a propriedade `href` no componente, pois a navegação será controlada pelo framework de roteamento.
*/
interface BrFooterItem {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.
* @example 'https://www.gov.br'
* @example '/home'
* @example '#section'
*/
"href"?: string;
}
/**
* O subcomponente `br-footer-legal` representa a área destinada a informações legais no rodapé do site, de acordo com a documentação de design do GovBR.
* Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
*/
interface BrFooterLegal {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
}
/**
* O subcomponente `br-footer-logo` representa a logo principal do site ou a logo dos parceiros.
* Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
* Para que ele represente a logo principal do site, o atributo `is-partner` deve ser definido como `false`, ou não deve ser definido.
* Para que ele represente a logo de um parceiro, o atributo `is-partner` deve ser definido como `true`.
*/
interface BrFooterLogo {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* Descrição da logo.
* @default 'logo'
*/
"description": string;
/**
* URL de destino quando a logo for clicada. Se fornecido, a logo será envolvida em um link.
*/
"href"?: string;
/**
* Define se a logo é de um parceiro.
* @default false
*/
"isPartner": boolean;
/**
* Posição da logo.
* @default 'left'
*/
"position": 'left' | 'center' | 'right';
/**
* Url da logo padrão.
* @default ''
*/
"src": string;
/**
* Target do link quando href é fornecido.
* @default '_self'
*/
"target"?: '_blank' | '_self' | '_parent' | '_top';
}
/**
* O subcomponente `br-footer-social` representa os ícones de redes sociais no rodapé do site, de acordo com a documentação de design do GovBR.
* Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
*/
interface BrFooterSocial {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId()
*/
"customId": string;
/**
* Descrição do ícone da rede social
*/
"description": string;
/**
* URL da rede social
* @default null
*/
"href": string;
/**
* Ícone da rede social
*/
"icon": string;
}
/**
* O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.
* Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.
* Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone
* deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para
* integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário
* e a clareza das interfaces.
* Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).
*/
interface BrIcon {
/**
* Permite adicionar classes CSS adicionais ao ícone. Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.
*/
"cssClasses"?: string;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-icon-${iconId++}`
*/
"customId": string;
/**
* Define o tipo de espelhamento do ícone. Aceita valores como "horizontal" para espelhar o ícone horizontalmente, "vertical" para espelhar verticalmente, ou ambos.
*/
"flip"?: 'horizontal' | 'vertical';
/**
* Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. O valor padrão é '16'.
* @default '16'
*/
"height": string;
/**
* Nome do ícone a ser exibido, utilizando a biblioteca Iconify. Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.
*/
"iconName": string;
/**
* Determina se o ícone pode receber foco. Se definido como verdadeiro, o ícone pode ser navegado usando Tab. O valor padrão é `false`.
* @default false
*/
"isFocusable"?: boolean;
/**
* Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor. Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto. O valor padrão é `false`.
* @default false
*/
"isInline"?: boolean;
/**
* Controla o comportamento de carregamento do ícone através do observer interno do Iconify. Comportamento: - Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift - `lazy={true}`: ativa o observer para carregamento lazy otimizado (útil em documentos longos com muitos ícones) - `lazy={false}`: carregamento imediato aplicando `noobserver` (mesmo comportamento do padrão) **Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout que ocorriam quando ícones eram carregados depois do conteúdo inicial.
* @example // Comportamento padrão (carregamento imediato - sem layout shift) <br-icon icon-name="mdi:home"></br-icon>
* @example // Carregamento lazy para otimizar performance em documentos longos <br-icon icon-name="mdi:home" lazy={true}></br-icon>
* @example // Carregamento imediato explícito (mesmo comportamento do padrão) <br-icon icon-name="mdi:home" lazy={false}></br-icon>
*/
"lazy"?: boolean;
/**
* Define o ângulo de rotação do ícone. Aceita valores como "90deg", "180deg" e "270deg" para rotacionar o ícone em diferentes ângulos.
*/
"rotate"?: '90deg' | '180deg' | '270deg';
/**
* Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. O valor padrão é '24'.
* @default '24'
*/
"width": string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).
* @example ```html
* <br-input label="Nome" placeholder="Digite seu nome"></br-input>
* ```
*/
interface BrInput {
/**
* Texto exibido no botão de ação à direita do input.
*/
"actionLabel": string;
/**
* Controla o comportamento de preenchimento automático do navegador para o input.
*/
"autocomplete": 'on' | 'off';
/**
* Controla a correção automática do texto.
* @default 'off'
*/
"autocorrect": 'off' | 'on';
/**
* Remove a borda do input quando não está em foco. Útil para composições contextuais (ex.: paginação).
* @default false
*/
"borderless": boolean;
/**
* Largura do campo de entrada (por exemplo, '88px'). Quando definido, sobrescreve a largura padrão de 100%.
*/
"controlWidth"?: string;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-input-${inputId++}`
*/
"customId": string;
/**
* Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
* @default 'medium'
*/
"density": 'large' | 'medium' | 'small';
/**
* Desativa o input, tornando-o não interativo.
* @default false
*/
"disabled": boolean;
/**
* Texto adicional que fornece ajuda ou informações sobre o input.
*/
"helpText": string;
/**
* Se verdadeiro, o input terá destaque visual.
* @default false
*/
"isHighlight": boolean;
/**
* Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).
* @default false
*/
"isInline": boolean;
/**
* Texto exibido como rótulo do input.
*/
"label": string;
/**
* Define o valor máximo para campos de entrada numéricos.
*/
"max": number;
/**
* Define o comprimento máximo do valor do campo de entrada.
*/
"maxlength": number;
/**
* Define o valor mínimo para campos de entrada numéricos.
*/
"min": number;
/**
* Define o comprimento mínimo do valor do campo de entrada.
*/
"minlength": number;
/**
* Se verdadeiro, permite a seleção de múltiplos arquivos.
* @default false
*/
"multiple": boolean;
/**
* Nome do input, utilizado para identificação em formulários.
*/
"name": string;
/**
* Define o padrão de entrada para validação.
*/
"pattern": string;
/**
* Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.
*/
"placeholder": string;
/**
* Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.
* @default false
*/
"readonly": boolean;
/**
* Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.
* @default false
*/
"required": boolean;
/**
* Define o estado do input Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.
*/
"state": 'info' | 'warning' | 'danger' | 'success';
/**
* Define o valor do passo para campos de entrada numéricos.
*/
"step": number;
/**
* Especifica o tipo de entrada do campo. Pode ser um dos seguintes: - 'color': Seletor de cor - 'email': Campo para e-mail - 'hidden': Campo oculto - 'password': Campo para senha - 'range': Controle deslizante - 'search': Campo de pesquisa - 'number': Campo para números - 'tel': Campo para números de telefone - 'text': Campo de texto padrão - 'url': Campo para URLs
* @default 'text'
*/
"type": | 'color'
| 'email'
| 'hidden'
| 'password'
| 'range'
| 'search'
| 'number'
| 'tel'
| 'text'
| 'file'
| 'url';
/**
* Valor exibido no input. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.
*/
"value": string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).
*/
interface BrItem {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-item-${itemId++}`
*/
"customId": string;
/**
* Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
* @default 'medium'
*/
"density": 'large' | 'medium' | 'small';
/**
* Desativa o item, tornando-o não interativo.
* @default false
*/
"disabled": boolean;
/**
* URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.
*/
"href"?: string;
/**
* Indica se o item está no estado ativo. Se definido como verdadeiro, o item será exibido como ativo.
* @default false
*/
"isActive": boolean;
/**
* Quando definido como `true`, o item será tratado como um botão.
* @default false
*/
"isButton": boolean;
/**
* Marca o item como interativo, permitindo que toda a superfície do item seja clicável.
* @default false
*/
"isInteractive": boolean;
/**
* Indica se o item está no estado selecionado. Se definido como verdadeiro, o item será exibido como selecionado.
* @default false
*/
"isSelected": boolean;
/**
* Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
*/
"setFocus": () => Promise<void>;
/**
* Define o alvo do link quando `href` está presente. Pode ser: - `_blank` para abrir em uma nova aba, - `_self` para abrir na mesma aba, - `_parent` para abrir na aba pai, - `_top` para abrir na aba superior.
*/
"target"?: '_blank' | '_self' | '_parent' | '_top';
/**
* Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser: - `'submit'` para enviar um formulário, - `'reset'` para redefinir um formulário, - `'button'` para um botão padrão.
*/
"type": 'submit' | 'reset' | 'button';
/**
* Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.
*/
"value"?: string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/list?tab=designer).
* @example ```html
* <br-list header="Tarefas">
* <li>Item 1</li>
* <li>Item 2</li>
* </br-list>
* ```
*/
interface BrList {
/**
* Indica se a lista possui o comportamento de accordion. O valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade.
* @default null
*/
"accordion": string;
/**
* Indica se a lista possui o comportamento de collapse.
* @default false
*/
"collapse": boolean;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-list-${listId++}`
*/
"customId": string;
/**
* Define o cabeçalho para a lista.
* @default null
*/
"header": string;
/**
* Indica que o divider para o título da lista estará oculto.
* @default false
*/
"hideHeaderDivider": boolean;
/**
* Indica se a lista será horizontal. Por padrão, a lista é vertical.
* @default false
*/
"isHorizontal": boolean;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/loading?tab=designer).
*/
interface BrLoading {
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-loading-${loadingId++}`
*/
"customId": string;
/**
* Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.
* @default false
*/
"isMedium": boolean;
/**
* Determina o tipo de indicador a ser exibido: - Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso. - Se falso, exibirá um indicador de carregamento indeterminado.
* @default false
*/
"isProgress": boolean;
/**
* Texto a ser exibido abaixo do indicador de carregamento. Pode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.
*/
"label": string;
/**
* Define a porcentagem de progresso a ser exibida na barra de progresso. Deve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.
*/
"progressPercent": number;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/magicbutton?tab=designer).
*/
interface BrMagicButton {
/**
* Texto de acessibilidade (ARIA label). Deve ser fornecido para ícones sem texto para garantir acessibilidade.
* @default ''
*/
"ariaLabel": string;
/**
* Define se o botão terá formato circular. Aplica contorno arredondado completo quando `true` e não houver `label`.
* @default false
*/
"circle": boolean;
/**
* Identificador único. Se não for fornecido, será gerado automaticamente.
* @default `br-magic-button-${MagicButtonId++}`
*/
"customId": string;
/**
* Densidade do botão. Define o tamanho do componente: - `large` para grande - `medium` para médio - `small` para pequeno
* @default 'medium'
*/
"density": 'large' | 'medium' | 'small';
/**
* Nome do ícone a ser exibido. Deve corresponder a um ícone disponível no sistema de ícones.
* @default ''
*/
"icon": string;
/**
* Texto do rótulo do botão. Utilizado como conteúdo principal quando presente.
* @default ''
*/
"label": string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).
*/
interface BrMessage {
/**
* Controla o comportamento do fechamento do componente quando `isClosable` é verdadeiro. - Se definido como `true`, o componente será automaticamente removido do DOM ao clicar no botão de fechar. - Se definido como `false`, o componente permanecerá no DOM e apenas emitirá o evento `brDidClose`. Esta propriedade não tem efeito se `isClosable` for `false`. O valor padrão é `false`.
* @default false
*/
"autoRemove": boolean;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-message-${messageId++}`
*/
"customId": string;
/**
* Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem. O fechamento emitirá o evento `brDidClose`, mas não removerá automaticamente o componente do DOM, a menos que a propriedade `autoRemove` também esteja definida como `true`. Este recurso não está disponível para mensagens do tipo feedback.
* @default false
*/
"isClosable": boolean;
/**
* Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário. Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.
* @default false
*/
"isFeedback": boolean;
/**
* Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal. Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.
* @default false
*/
"isInline": boolean;
/**
* Define o texto da mensagem que será exibido. Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.
*/
"message": string;
/**
* Define o título da mensagem, que é exibido no início, acima da mensagem principal. Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.
*/
"messageTitle": string;
/**
* Se definido como verdadeiro, um ícone associado à mensagem será exibido. Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.
* @default false
*/
"showIcon": boolean;
/**
* Define o estado do message. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.
* @default 'info'
*/
"state": 'info' | 'warning' | 'danger' | 'success';
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/modal?tab=designer).
*/
interface BrModal {
/**
* Define o alinhamento do conteúdo do rodapé (slot="footer"). Valores possíveis: 'start', 'end', 'center'.
* @default 'center'
*/
"alignFooter": 'start' | 'end' | 'center';
/**
* Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'.
* @default false
*/
"autoClose": boolean;
/**
* Método público para fechar o modal
*/
"close": () => Promise<void>;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default Helpers.generateUniqueId('modal')
*/
"customId": string;
/**
* Seletor CSS para o elemento que deve receber foco quando o modal é aberto.
*/
"initialFocusSelector": string;
/**
* Método público para abrir o modal
*/
"open": () => Promise<void>;
/**
* Se `true`, exibe um fundo escurecido (scrim) atrás do modal.
* @default false
*/
"scrim": false;
/**
* Se `true`, habilita a rolagem interna do conteúdo do modal.
* @default false
*/
"scrollable": false;
/**
* Controla a visibilidade do modal.
* @default false
*/
"show": boolean;
/**
* Define o tamanho (largura) do modal. Valores possíveis: 'xsmall', 'small', 'medium', 'large', 'auto'.
* @default 'medium'
*/
"size": 'xsmall' | 'small' | 'medium' | 'large' | 'auto';
/**
* O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido.
*/
"titleText": string;
}
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/pagination?tab=designer).
* A navegação é renderizada como um elemento `nav` com itens de página numéricos e botões
* de anterior/próximo. O componente expõe atributos ARIA e previne a navegação nativa,
* disparando um evento com a página selecionada.
*/
interface BrPagination {
/**
* Rótulo acessível do container `nav`. Se não fornecido, será gerado automaticamente um rótulo descritivo e único no momento da renderização (ex.: "Paginação: página 2 de 10").
*/
"ariaLabel": string;
/**
* Define se a paginação usará um esquema de cores escuro. Quando definido como `dark`, aplica a classe `dark-mode` ao container principal.
*/
"colorMode"?: 'dark';
/**
* Página atual (1-indexada). Valores fora do intervalo serão ajustados.
* @default 1
*/
"current": number;
/**
* Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
* @default `br-pagination-${paginationId++}`
*/
"customId": string;
/**
* Ajusta a densidade da paginação, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
* @default 'medium'
*/
"density": 'large' | 'medium' | 'small';
/**
* Rótulo acessível do botão de reticências que abre a lista de páginas ocultas.
* @default 'Abrir ou fechar a lista de paginação'
*/
"ellipsisLabel": string;
/**
* Rótulo do seletor "ir para página" (variante contextual).
* @default 'Página'
*/
"goToPageLabel": string;
/**
* Sufixo textual para a informação de quantidade de itens (variante contextual).
* @default 'itens'
*/
"itemsText": string;
/**
* Rótulo acessível do botão de próxima página.
* @default 'Página seguinte'
*/
"nextLabel": string;
/**
* Itens por página (aplicável na variante contextual).
* @default 10
*/
"perPage": number;
/**
* Rótulo do seletor de itens por página (variante contextual).
* @default 'Exibir'
*/
"perPageLabel": string;
/**
* Opções disponíveis de itens por página (variante contextual).
* @default [10, 20, 30]
*/
"perPageOptions": number[];
/**
* Rótulo acessível do botão de página anterior.
* @default 'Voltar página'