/* 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 { LoadingChangeDetail, LoadingCompleteDetail, LoadingCompletionBehavior, LoadingIndeterminateStateDetail, LoadingLabelPosition, LoadingMode, LoadingSize, LoadingSpeed, LoadingValueDetail } from "./components/loading/loading"; import { ColumnWidth, TableAlignment, TableDensity, TableDividerStyle, TableOverflow, TableTooltipMode, TableTooltipState } from "./components/table/table-types"; import { IUploadFile } from "./utils/interfaces"; export { LoadingChangeDetail, LoadingCompleteDetail, LoadingCompletionBehavior, LoadingIndeterminateStateDetail, LoadingLabelPosition, LoadingMode, LoadingSize, LoadingSpeed, LoadingValueDetail } from "./components/loading/loading"; export { ColumnWidth, TableAlignment, TableDensity, TableDividerStyle, TableOverflow, TableTooltipMode, TableTooltipState } from "./components/table/table-types"; export { IUploadFile } from "./utils/interfaces"; export namespace Components { /** * ## Design System * Para 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/avatar?tab=designer). */ 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"; /** * Permite definir a cor de fundo do componente. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não especificada, usa a cor padrão do tema. * @default '#DBE8FB' */ "bgColor": string; /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-avatar') */ "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; } /** * ## Design System * Para 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/breadcrumb?tab=designer). */ 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; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-breadcrumb') */ "customId": string; /** * Caso não seja fornecido, o valor padrão será /. * @default '/' */ "homeUrl": string; } /** * ## Design System * Para 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/button?tab=designer). */ 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; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-button') */ "customId": string; /** * Define o índice de tabulação do botão. Ú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. */ "customTabIndex"?: number; /** * 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. */ "shape": 'circle' | 'block' | 'pill'; /** * Define o tipo de botão, especificando seu comportamento padrão. */ "type": 'button' | 'reset' | 'submit'; /** * Define o valor inicial do botão em um formulário. */ "value": string; } /** * ## Design System * Para 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/card?tab=designer). */ interface BrCard { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-card') */ "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; } /** * ## Design System * Para 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). */ 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; /** * Indica se o checkbox é pai de um grupo de checkboxes. * @default false */ "isFather": 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; /** * Define o número de checkboxes filhos em um grupo de checkboxes. * @param value Número de checkboxes filhos. */ "setNumberOfChildren": (value: number) => Promise; /** * Indica a validade do checkbox. 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; /** * Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`
`). 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; } /** * ## Design System * Para 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). */ 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; } /** * ## Design System * Para 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/collapse?tab=designer). */ interface BrCollapse { /** * Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez no mesmo grupo. * @default null */ "accordionGroup"?: string; /** * Fecha o collapse programaticamente. */ "closeCollapse": () => Promise; /** * Identificador único do componente. Um valor é gerado automaticamente quando não informado. * @default Helpers.generateUniqueId('clp') */ "customId": string; /** * Define a posição do ícone no acionador: 'left' ou 'right'. * @default 'right' */ "iconPosition": 'left' | 'right'; /** * Classe CSS do ícone exibido quando o conteúdo está visível. * @default 'fa6-solid:chevron-up' */ "iconToHide": string; /** * Classe CSS do ícone exibido quando o conteúdo está oculto. * @default 'fa6-solid:chevron-down' */ "iconToShow": string; /** * Controla se o collapse está aberto. * @default false */ "open": boolean; /** * Abre o collapse programaticamente. */ "openCollapse": () => Promise; } /** * ## Design System * Para 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/breadcrumb?tab=designer). */ interface BrCrumb { /** * Define se o crumb é a página atual ativa no breadcrumb. * @default false */ "active": boolean; /** * Define se o crumb é o item inicial (Home). * @default false */ "home": boolean; /** * Rótulo (texto) do crumb. */ "label": string; /** * Define o alvo do link quando `url` está presente. (ex: _blank, _self). */ "target"?: string; /** * URL ou caminho para o qual o usuário será direcionado ao clicar no crumb. */ "url"?: string; } /** * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/datetime-picker?tab=designer). */ interface BrDatetimePicker { /** * Define se a data atual deve ser selecionada automaticamente ao abrir o datetime-picker. O padrão é false * @default false */ "autoSelectToday": boolean; /** * Fecha o dropdown do calendário. */ "close": () => Promise; /** * Define se o datetime-picker está desabilitado. * @default false */ "disabled": boolean; /** * Retorna a data atualmente selecionada no datetime-picker. */ "getValue": () => Promise; /** * Define o modo do datetime-picker. Os valores possíveis são: - "date": Permite selecionar apenas a data. - "time": Permite selecionar apenas o horário. - "datetime": Permite selecionar tanto a data quanto o horário. * @default 'datetime' */ "mode": DatetimePickerMode; /** * Define o nome do campo do datetime-picker. Este nome será utilizado ao submeter o formulário que contém o datetime-picker. */ "name": string; /** * Abre o dropdown do calendário. */ "open": () => Promise; /** * Define o placeholder do campo de entrada do datetime-picker. */ "placeholder": string; /** * Reseta o estado interno do componente para os valores iniciais. */ "reset": () => Promise; /** * Define a data selecionada no datetime-picker. * @param value Data a ser definida ou null para resetar o valor */ "setValue": (value: Date | null) => Promise; /** * Alterna o estado do dropdown do calendário entre aberto e fechado. */ "toggle": () => Promise; /** * Define o valor inicial do datetime-picker. Pode ser uma instância de Date ou null. Se não for fornecido, o valor padrão será null. */ "value"?: Date | null; /** * Define o dia da semana em que a semana começa. Os valores possíveis são: 0 - Domingo 1 - Segunda-feira 2 - Terça-feira 3 - Quarta-feira 4 - Quinta-feira 5 - Sexta-feira 6 - Sábado * @default 0 */ "weekStartsOn": WeekDayIndex; } /** * ## Design System * Para 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/divider?tab=designer). */ interface BrDivider { /** * Alinhamento do conteúdo quando há slot interno. */ "align": DividerAlign; /** * Faz o divisor ocupar toda a largura do container, compensando paddings laterais. * @default false */ "bleed": boolean; /** * Estilo de borda do divisor. * @default 'solid' */ "borderStyle": DividerBorderStyle; /** * Cor do divisor. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não definida, usa a cor padrão do tema. * @default '' */ "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; /** * Ativa variante de alto contraste para fundos escuros. * @default false */ "isDarkMode": boolean; /** * Margin bottom em pixels; se omitido, aplica padrão interno. * @default null */ "marginBottom": number; /** * Margin left em pixels; se omitido, aplica padrão interno. * @default null */ "marginLeft": number; /** * Margin right em pixels; se omitido, aplica padrão interno. * @default null */ "marginRight": number; /** * Margin top em pixels; se omitido, aplica padrão interno. * @default null */ "marginTop": number; /** * Orientação do divisor.Em modo vertical, posicione dentro de um container com `display: flex`. * @default 'horizontal' */ "orientation": DividerOrientation; /** * Espessura visual do divisor. * @default 'small' */ "thickness": DividerThickness; } /** * ## Design System * Para 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/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). * @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; /** * 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; } /** * ## Design System * Para 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/footer?tab=designer). */ 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'; } /** * ## Design System * Para 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/footer?tab=designer). */ interface BrFooterCategory { /** * Identificador único do componente; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId": string; /** * Título da categoria exibido no cabeçalho da lista. * @default '' */ "label": string; } /** * ## Design System * Para 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/footer?tab=designer). */ 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. */ "href"?: string; } /** * ## Design System * Para 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/footer?tab=designer). */ interface BrFooterLegal { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; } /** * ## Design System * Para 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/footer?tab=designer). */ 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; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeader { /** * Texto exibido como título do cabeçalho. * @default null */ "caption": string; /** * URL associada ao título do cabeçalho. * @default null */ "captionUrl": string; /** * Identificador único do cabeçalho; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId": string; /** * Densidade do cabeçalho: controla espaçamento e proporções. * @default 'medium' */ "density": HeaderDensity; /** * Ativa o modo compacto do cabeçalho. * @default false */ "isCompact": boolean; /** * Fixa o cabeçalho no topo durante a rolagem. * @default false */ "isSticky": boolean; /** * Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento. Pode ser chamado externamente para forçar a atualização das listas. */ "resetHeaderList": () => Promise; /** * Define qual lista encolhe primeiro quando o espaço é limitado. * @default 'functions' */ "shrinkFirst": 'links' | 'functions'; /** * Texto da assinatura exibida ao lado da logo. * @default null */ "signature": string; /** * Texto exibido como subtítulo do cabeçalho. * @default null */ "subcaption": string; /** * URL associada ao subtítulo do cabeçalho. * @default null */ "subcaptionUrl": string; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderFunction { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId": string; /** * URL de destino da funcionalidade. * @default null */ "href": string; /** * Nome do ícone exibido. * @default null */ "iconName": string; /** * 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. * @default '_self' */ "target"?: '_blank' | '_self' | '_parent' | '_top'; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderLink { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId": string; /** * URL do link. * @default null */ "href": string; /** * 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. * @default '_self' */ "target"?: '_blank' | '_self' | '_parent' | '_top'; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderList { /** * Fecha a lista. */ "closeList": () => Promise; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; /** * Verifica se a lista está aberta. * @returns Um booleano indicando se a lista está aberta. */ "isListOpen": () => Promise; /** * Título da lista. * @default null */ "listTitle": string; /** * Abre a lista. */ "openList": () => Promise; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderLogo { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId": string; /** * Texto alternativo/descritivo da logo. * @default 'logo' */ "description": string; /** * Altura da imagem. * @default null */ "height": string; /** * URL de destino quando a logo for clicada. Se fornecido, a logo será envolvida em um link. */ "href"?: string; /** * Alterna para versão compacta quando true. * @default false */ "isCompact": boolean; /** * Url da logo padrão. * @default '' */ "src": string; /** * Target do link quando href é fornecido. * @default '_self' */ "target"?: '_blank' | '_self' | '_parent' | '_top'; /** * Largura da imagem. * @default null */ "width": 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. */ "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. */ "lazy"?: boolean; /** * Define o ângulo de rotação do ícone. */ "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; } /** * ## Design System * Para 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/input?tab=designer). */ interface BrInput { /** * Texto exibido no botão de ação à direita do input. */ "actionLabel"?: string; /** * Define o tabindex do botão de ação. Útil para remover o botão da sequência de tabulação quando o foco é gerenciado externamente (ex.: br-select). */ "actionTabIndex"?: number; /** * Controla o comportamento de preenchimento automático do navegador para o input. */ "autocomplete"?: InputToggle; /** * Controla a correção automática do texto. * @default 'off' */ "autocorrect": InputToggle; /** * 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": InputDensity; /** * 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; /** * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas). */ "mask"?: 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 * @remarks O estado é propagado para o slot de feedback, mas também pode ser controlado diretamente pelo conteúdo do slot. */ "state"?: InputState; /** * Define o valor do passo para campos de entrada numéricos. */ "step"?: number; /** * Especifica o tipo de entrada do campo. * @default 'text' */ "type": InputType; /** * Valor exibido no input. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa. */ "value"?: string; } /** * ## Design System * Para 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/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; /** * 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; } /** * ## Design System * Para 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/list?tab=designer). */ 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; } /** * ## Design System * Para 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/loading?tab=designer). */ interface BrLoading { /** * Define o texto do botão de cancelamento. No modo `spinner`, esta prop não tem efeito. * @default 'Cancelar' */ "cancelLabel": string; /** * Define se o botão de cancelamento será exibido. Ao pressionar o botão, o evento `brLoadingCancel` é emitido. No modo `spinner`, esta prop não tem efeito. * @default false */ "cancelable": boolean; /** * Define o progresso como concluído. * @returns Progresso normalizado. */ "complete": () => Promise<{ value: number; }>; /** * Define o comportamento quando o progresso atinge 100. No modo `spinner`, esta prop não tem efeito. * @default 'persist' */ "completion": LoadingCompletionBehavior; /** * Identificador único do componente, útil para acessibilidade e testes. Se não for fornecido, um ID único será gerado automaticamente. * @default Gerado automaticamente no formato 'loading-xxxx' onde 'xxxx' é uma sequência aleatória. */ "customId"?: string; /** * Oculta o componente. * @returns Estado de visibilidade. */ "hide": () => Promise<{ visible: boolean; }>; /** * Soma um valor ao progresso atual. * @param step Incremento aplicado. * @returns Progresso normalizado. */ "incrementValue": (step?: number) => Promise<{ value: number; }>; /** * Define o rótulo exibido no modo `spinner`. No modo `progress`, esta prop não tem efeito. * @default undefined */ "label"?: string; /** * Define a posição da label em relação ao loading. * @default 'bottom' */ "labelPosition": LoadingLabelPosition; /** * Define o modo de exibição do componente. * @default 'spinner' */ "mode": LoadingMode; /** * Reinicia o progresso e exibe o componente. * @returns Progresso normalizado. */ "reset": () => Promise<{ value: number; }>; /** * Define o valor do progresso. * @param value Valor desejado. * @returns Progresso normalizado. */ "setValue": (value: number) => Promise<{ value: number; }>; /** * Exibe o componente. * @returns Estado de visibilidade. */ "show": () => Promise<{ visible: boolean; }>; /** * Define o tamanho visual nos modos `spinner` e `progress`. * @default 'medium' */ "size": LoadingSize; /** * Define a velocidade da animação/transição. * @default 'normal' */ "speed": LoadingSpeed; /** * Define o progresso no modo `progress`. No modo `spinner`, esta prop não tem efeito. Valores inválidos são normalizados para `0`. * @default 0 */ "value": number; } /** * ## Design System * Para 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/magic-button?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; } /** * ## Design System * Para 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/menu?tab=designer). */ interface BrMenu { /** * Classes CSS para definir breakpoints responsivos do menu. Utilize esta propriedade para controlar a largura do menu em diferentes tamanhos de tela. * @default '' */ "breakpoints": string; /** * Define se o menu deve usar comportamento contextual (aparece na parte inferior). Quando ativado, o menu é posicionado na parte inferior da tela em dispositivos móveis. * @default false */ "contextual": boolean; /** * Rótulo do botão trigger do menu contextual. Exibido apenas em modo contextual e em telas menores (mobile). * @default 'Menu Contextual' */ "contextualLabel": string; /** * Define a densidade dos itens do menu, alterando o espaçamento interno. - `small` (densidade alta): itens mais compactos - `medium` (padrão): equilíbrio entre economia de espaço e separação - `large` (densidade baixa): maior espaçamento (recomendado em touch) * @default 'medium' */ "density": 'large' | 'medium' | 'small'; /** * Define se o menu deve usar comportamento push (sempre visível em telas maiores). Quando ativado, o menu permanece fixo na lateral e empurra o conteúdo principal. * @default false */ "push": boolean; /** * Título da seção de redes sociais exibida no rodapé do menu. Utilize esta propriedade para personalizar o texto que aparece acima dos ícones sociais. * @default 'Redes Sociais' */ "socialTitle": string; } /** * ## Design System * Para 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/menu-header?tab=designer). */ interface BrMenuHeader { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default `br-menu-${MenuHeaderId++}` */ "customId": string; /** * Texto alternativo para a imagem do logo * @default 'Logo' */ "logoAlt": string; /** * URL da imagem do logo no cabeçalho do menu */ "logoSrc"?: string; /** * Texto de identificação do site ou sistema */ "signature"?: string; } /** * ## Design System * Para 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/menu-info?tab=designer). */ interface BrMenuInfo { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default `br-menu-info-${MenuInfoId++}` */ "customId": string; /** * Informações adicionais em formato de texto */ "info"?: string; } /** * ## Design System * Para 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/menu?tab=designer). */ interface BrMenuItem { /** * Define se o item do menu está ativo/selecionado. Quando ativado, aplica estilos visuais para destacar o item como atual ou selecionado. * @default false */ "active": boolean; /** * Define o modo de exibição do item, controlando os ícones de expansão. - `accordion`: exibe setas para cima/baixo (usado em menus de nível 0). - `drill-down`: exibe seta para a direita (usado em menus de níveis 1+). - `none`: não exibe ícones de expansão. * @default 'none' */ "displayMode": 'accordion' | 'drill-down' | 'none'; /** * Define se o item deve exibir um divisor visual. Quando ativado, adiciona uma linha separadora para organizar visualmente os itens do menu. * @default false */ "divider": boolean; /** * Indica se o item está expandido para fins de acessibilidade (ARIA). Este estado é controlado externamente (por exemplo, por br-menu-list). Não altera o estado visual de "active". * @default false */ "expanded": boolean; /** * URL de destino do link do item do menu. Utilize esta propriedade para definir o endereço para onde o usuário será direcionado ao clicar no item. * @default '#' */ "href": string; /** * Ícone exibido no item do menu. Utilize esta propriedade para definir o ícone que será mostrado ao lado do conteúdo do item. */ "icon": string; /** * Define como o link será aberto. - `_self`: abre no mesmo contexto de navegação (padrão) - `_blank`: abre em nova aba ou janela - `_parent`: abre no contexto pai - `_top`: abre no contexto de nível superior * @default '_blank' */ "target"?: '_self' | '_blank' | '_parent' | '_top'; } /** * ## Design System * Para 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/menu?tab=designer). */ interface BrMenuLink { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default `br-menu-link-${MenuLinkId++}` */ "customId": string; /** * Título do link */ "titulo": string; /** * URL do link */ "url": string; } /** * ## Design System * Para 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/menu?tab=designer). */ interface BrMenuList { /** * Define se o item deve exibir um divisor visual. Quando ativado, adiciona uma linha separadora para organizar visualmente os itens do menu. * @default false */ "divider": boolean; /** * Define se o menu-list inicia expandido. Útil para manter agrupamentos abertos por padrão no menu contextual. * @default false */ "expanded": boolean; /** * Ícone exibido no item do menu. Utilize esta propriedade para definir o ícone que será mostrado ao lado do label. */ "icon": string; /** * Texto do label do item do menu. Utilize esta propriedade para definir o texto que será exibido no item do menu. */ "label": string; /** * Nível do menu na hierarquia de navegação. Utilizado para determinar o comportamento do menu (acordeão para nível 0, drill-down para níveis superiores). * @default 0 */ "menuLevel": number; } /** * ## Design System * Para 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/menu?tab=designer). */ interface BrMenuLogo { /** * Texto alternativo da imagem */ "alt"?: 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; /** * Altura da imagem (com unidade, ex: '80px', 'auto') */ "height"?: string; /** * URL da imagem */ "src": string; /** * Largura da imagem (com unidade, ex: '100px', '50%') */ "width"?: string; } /** * ## Design System * Para 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/menu?tab=designer). */ interface BrMenuSocial { /** * Rótulo para acessibilidade */ "ariaLabel": string; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; /** * Ícone da rede social */ "icon": string; /** * URL do link */ "url": string; } /** * ## Design System * Para 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/message?tab=designer). */ interface BrMessage { /** * Define um rótulo customizado para leitores de tela. Se não fornecido, será gerado automaticamente baseado no estado da mensagem. Exemplo: "Mensagem de sucesso", "Mensagem de erro", etc. * @default '' */ "ariaLabel": string; /** * 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'; } /** * ## Design System * Para 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/modal?tab=designer). */ interface BrModal { /** * Define o alinhamento do conteúdo do rodapé (slot="footer"). * @default 'center' */ "alignFooter": 'start' | 'end' | 'center'; /** * Define o comportamento de fechamento do modal. - `true`: O modal fecha automaticamente ao clicar no botão fechar. - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve controlar manualmente o fechamento. * @default false */ "autoClose": boolean; /** * Método público para fechar o modal */ "close": () => Promise; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId('modal') */ "customId": string; /** * Seletor CSS do elemento que deve receber foco quando o modal é aberto (ex: `"#meu-elemento"`). */ "initialFocusSelector": string; /** * Método público para abrir o modal */ "open": () => Promise; /** * 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. * @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; } /** * ## Design System * Para 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/pagination?tab=designer). */ 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; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-pagination') */ "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' */ "previousLabel": string; /** * Quantidade total de páginas (mínimo 1). * @default 1 */ "total": number; /** * Total de itens (aplicável na variante contextual). */ "totalItems"?: number; /** * Variante de renderização do componente. - `default`: paginação numérica (padrão) - `contextual`: paginação contextual com seletores e informação de itens * @default 'default' */ "variant": 'default' | 'contextual'; } /** * ## Design System * Para 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/radio?tab=designer). */ interface BrRadio { /** * Define o estado de seleção do radio. Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado. * @default false */ "checked": boolean; /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-radio') */ "customId": string; /** * Desativa o radio, tornando-o não interativo. * @default false */ "disabled": boolean; /** * Define se o label associado ao radio deve ser oculto. Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional. * @default false */ "hasHiddenLabel": boolean; /** * Texto descritivo exibido à direita do radio. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado. */ "label": string; /** * Define o nome do radio, que é utilizado para agrupar radios 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; "setFocus": () => Promise; /** * Indica a validade do radio. 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; /** * Define o valor associado ao radio quando ele faz parte de um formulário nativo (``). Esse valor é enviado com o formulário quando o radio está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`. */ "value": string; } /** * ## Design System * Para 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/scrim?tab=designer). */ interface BrScrim { /** * Define o seletor para o elemento activator. Nota: O slot 'activator' tem prioridade sobre esta propriedade. * @default null */ "activator": string | null; /** * Define um rótulo acessível personalizado para o diálogo. Se não fornecido, será usado "Conteúdo do diálogo" como padrão. * @default null */ "ariaLabel": string | null; /** * Cor de fundo personalizada para o scrim. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não especificada, usa a cor padrão do tema. * @default null */ "bgColor": string | null; /** * Método público para esconder o scrim */ "close": () => Promise; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; /** * Define a opacidade personalizada do scrim * @default null */ "customOpacity": number | null; /** * Desativa o fechamento do scrim ao ser clicado * @default false */ "disableCloseOnClick": boolean; /** * Define o modo de exibição do scrim: - `'fullscreen'`: Ocupa toda a tela (`position: fixed`). (_padrão_) - `'parent'`: Ocupa apenas o elemento pai (`position: absolute`). O elemento pai deve ter `position: relative` ou outro valor diferente de `static`. Para a variante `'legibility'`, este atributo é ignorado: o posicionamento é sempre calculado automaticamente a partir das coordenadas do elemento pai. * @default 'fullscreen' */ "displayMode": 'fullscreen' | 'parent'; /** * Ativa/desativa o scrim * @default false */ "isOpen": boolean; /** * Define a borda de ancoragem da faixa de cobertura da variante `legibility`. Controla de qual borda (ou centro) do elemento a máscara de overlay cresce, tendo seu tamanho determinado por `legibilitySize`. - `'top'`: faixa ancorada na borda superior, cresce para baixo. - `'bottom'`: faixa ancorada na borda inferior, cresce para cima. - `'left'`: faixa ancorada na borda esquerda, cresce para a direita. - `'right'`: faixa ancorada na borda direita, cresce para a esquerda. - `'center'`: faixa centralizada verticalmente no elemento. Quando `legibilitySize` é `null`, a máscara ocupa 100% independentemente da âncora definida, equivalendo a uma cobertura total. Só tem efeito quando `variant="legibility"`. * @default 'bottom' */ "legibilityAnchor": 'top' | 'bottom' | 'left' | 'right' | 'center'; /** * Define o tamanho da faixa de cobertura da variante `legibility`, usado em conjunto com `legibilityAnchor`. Aceita qualquer valor CSS de comprimento válido: - Percentual relativo ao elemento pai: `'40%'`, `'75%'` - Comprimento absoluto: `'120px'`, `'8rem'`, `'6em'` - Função CSS: `'calc(100% - 2rem)'` Quando `null` (padrão), a máscara ocupa **100%** da dimensão relevante: - **altura** para âncoras `top`, `bottom` e `center` - **largura** para âncoras `left` e `right` Só tem efeito quando `variant="legibility"` está definido. * @default null */ "legibilitySize": string | null; /** * Método público para exibir o scrim */ "open": () => Promise; /** * Posiciona o conteúdo no topo, centro, direita, esquerda, abaixo dentro do scrim */ "positionContent": 'top' | 'center' | 'right' | 'left' | 'bottom'; /** * Define a estratégia de manipulação de rolagem quando scrim está aberto - 'block': Impede a rolagem completamente - 'close': Fecha o scrim quando ocorre rolagem */ "scrollStrategy": 'block' | 'close'; /** * Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim. * @default 50 */ "scrollThreshold": number; /** * Define o limite de rolagem para o fechamento automático do scrim. */ "setScrollThreshold": (threshold: number) => Promise; /** * Espaçamento interno (em pixels) ao redor da área de fresta no scrim vazado. * @default 8 */ "spotlightPadding": number; /** * Define a forma da área de fresta no scrim vazado. - 'rect': Retangular com bordas retas. - 'rounded': Retangular com bordas arredondadas (border-radius de 8px). - 'circle': Elipse inscrita na área do elemento alvo. * @default 'rect' */ "spotlightShape": 'rect' | 'rounded' | 'circle'; /** * Ativa o modo de scrim vazado (variante 'spotlight'), criando uma área de fresta no overlay que destaca o elemento referenciado pelo seletor CSS fornecido. * @default null */ "spotlightTargetId": string | null; /** * Método público para alternar o estado de exibição do scrim */ "toggle": () => Promise; /** * Recalcula manualmente a posição e dimensões da fresta do scrim vazado. Útil quando o elemento alvo muda de posição sem disparar resize ou scroll. */ "updateSpotlight": () => Promise; /** * Define a variante semântica do scrim - `'focus'`: Redireciona o foco hierárquico do usuário. Cor #000000 com opacidade 40%. (_padrão_) - `'spotlight'`: Scrim vazado — destaca um elemento específico criando uma fresta no overlay. Aplica as mesmas cores da variante `'focus'`. Use `spotlightTargetId` para indicar o elemento a ser destacado. - `'legibility'`: Melhora o contraste e leitura de texto sobre superfícies. Cor #000000 com opacidade 64%. Para cobertura parcial, use `legibilityAnchor` + `legibilitySize`. Para gradiente suave, use `bgColor` com um valor de gradiente CSS e `customOpacity="1"`, ex.: `bg-color="linear-gradient(to top, rgba(0,0,0,0.64), transparent)"`.. Quando definida, aplica automaticamente as especificações de cor e opacidade do Design System. As propriedades `bgColor` e `customOpacity` têm prioridade e sobrepõem os valores da variante. * @default 'focus' */ "variant": 'focus' | 'spotlight' | 'legibility'; /** * Define o valor de z-index do scrim * @default null */ "zIndex": number | null; } /** * ## Design System * Para 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/select?tab=designer). */ interface BrSelect { /** * Propaga para o input interno a remoção da borda quando desfocado. * @default false */ "borderless": boolean; /** * Limpa todas as opções selecionadas. */ "clear": () => Promise; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default `br-select-${selectId++}` */ "customId": string; /** * Desabilita a interação com o componente `br-select`. Quando `true`, o input e as opções ficam desabilitados e não respondem a cliques ou teclas. * @default false */ "disabled": boolean; /** * Retorna o valor selecionado. * @returns O valor atual. */ "getValue": () => Promise; /** * Largura do campo de entrada interno (por exemplo, '88px'). Quando definido, sobrescreve a largura padrão de 100% do input. */ "inputWidth"?: string; /** * Exibe o rótulo e o controle em linha (ao lado), ao invés de empilhados. Útil para casos contextuais como paginação. * @default false */ "isInline": boolean; /** * Habilita o modo múltiplo para selecionar várias opções. * @default false */ "isMultiple": boolean; /** * Indica se a listagem de itens do select está expandida * @default false */ "isOpen": boolean; /** * Controla se o dropdown permanece aberto após selecionar opções. Quando `true`, permite seleção sequencial sem reabrir a lista. * @default false */ "keepOpenOnSelect": boolean; /** * Rótulo que indica o tipo de informação que deve ser selecionada. */ "label": string; /** * Define as opções disponíveis no componente de seleção. Se uma string for fornecida, ela será convertida internamente para um array via `JSON.parse`. Caso o formato seja inválido, um erro será registrado e as opções serão definidas como um array vazio. Exemplo de uso: ```typescript options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]' // ou options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }] ``` * @default [] */ "options": | string | { label: string value: string selected?: boolean }[]; /** * Texto auxiliar exibido antes de uma seleção. * @default '' */ "placeholder": string; /** * Rótulo para selecionar todas as opções. * @default 'Selecionar todos' */ "selectAllLabel": string; /** * Define o valor do componente. * @param newValue O novo valor a ser definido. */ "setValue": (newValue: string | string[]) => Promise; /** * Exibe o ícone de busca no campo de entrada. * @default false */ "showSearchIcon": boolean; /** * Inverte o valor da prop `isOpen` */ "toggleOpen": () => Promise; /** * Rótulo para desmarcar todas as opções. * @default 'Desselecionar todos' */ "unselectAllLabel": string; /** * Valor selecionado (string para single, string[] para multiple) */ "value"?: string | string[]; } /** * ## Design System * O `br-select-option` é um subcomponente lógico de `br-select`, usado para * declarar opções de forma declarativa no HTML. */ interface BrSelectOption { /** * Rótulo da opção. Quando omitido, o texto do slot é usado. */ "label"?: string; /** * Indica se a opção está selecionada. * @default false */ "selected": boolean; /** * Valor da opção. */ "value"?: string; } /** * ## Design System * Para 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/sign-in?tab=designer). */ interface BrSignIn { /** * Define o rótulo acessível do sign-in, especialmente importante para formatos circulares. */ "ariaLabel": string; /** * Define se o sign-in usará um esquema de cores escuro. */ "colorMode": 'dark'; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "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 sign-in, tornando-o não interativo. * @default false */ "disabled": boolean; /** * Define a ênfase do sign-in, alterando sua aparência para criar hierarquia visual. * @default 'secondary' */ "emphasis": 'primary' | 'secondary'; /** * URL para onde o usuário será redirecionado ao clicar. Use para login com provedores externos ou em sites tradicionais. */ "href": string; /** * Define o formato do sign-in. * @default 'pill' */ "shape": 'block' | 'circle' | 'pill'; /** * Define onde abrir o link quando href é fornecido. * @default '_self' */ "target": '_self' | '_blank' | '_parent' | '_top'; } /** * ## Design System * Para 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/skip-link?tab=designer). */ interface BrSkipLink { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; /** * Oculta o componente programaticamente. */ "hide": () => Promise; /** * Define a posição do skip link na tela. - 'top-left': Posicionado no canto superior esquerdo. - 'top-center': Posicionado no centro superior. - 'top-right': Posicionado no canto superior direito. * @default 'top-left' */ "position": 'top-left' | 'top-center' | 'top-right'; /** * Exibe o componente programaticamente. */ "show": () => Promise; /** * Exibe a contagem de itens no formato (1/4), (2/4), etc. Quando `true`, cada item mostrará sua posição relativa ao total de itens. Por padrão, é `true` para o modo simple e `false` para o modo compound. */ "showItemCount"?: boolean; /** * Define se o skip link apresenta um ou múltiplos itens visíveis. - 'simple': Exibe apenas um item por vez. - 'compound': Exibe uma lista com múltiplos itens. * @default 'compound' */ "variant": 'simple' | 'compound'; /** * Define o z-index do componente. Controla a ordem de empilhamento do componente na página. * @default null */ "zIndex": number | null; } /** * ## Design System * Para 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/skip-link?tab=designer). */ interface BrSkiplinkItem { /** * ID personalizado. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; /** * Controla a visibilidade da tag numérica. Quando `true`, a tag numérica não será exibida, mesmo que `keyNumber` esteja definido. O atalho de teclado continua funcionando, apenas a indicação visual é ocultada. * @default false */ "hideTag": boolean; /** * Move o foco para este item. */ "itemFocus": () => Promise; /** * Número da tecla para acesso rápido. Permite que o usuário ative este item pressionando Alt+[keyNumber]. Aceita valores de 1 a 9. Esta propriedade implementa uma alternativa ao accessKey nativa, fornecendo um atalho de teclado consistente e acessível. */ "keyNumber"?: number; /** * Navega para o target definido. Move o foco para o elemento alvo e ajusta a rolagem da página se necessário. */ "navigateToTarget": () => Promise; /** * ID do elemento de destino ou seletor CSS. Este é o elemento para o qual o usuário será levado ao ativar este item. */ "target": string; } /** * ## Design System * Para 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/step?tab=designer). */ interface BrStep { /** * Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep */ "BackToPreviousStep": () => Promise; /** * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step. */ "GetActiveStep": () => Promise; /** * Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep */ "ProceedToNextStep": () => Promise; /** * Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo. */ "StepValidation": (validationStatus: "success" | "info" | "danger" | "warning") => Promise; /** * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step e stepItem * @default 'default' */ "contentType": 'default' | 'br-icon' | 'no-content' | 'slotted'; /** * define o passo que começará destacado * @default '0' */ "initialStep": string; /** * Propriedade que define a posição onde o texto de destaque,label, ficará localizado no stepItem * @default 'bottom' */ "labelPosition"?: 'top' | 'right' | 'bottom' | 'left'; /** * propriedade responsável por definir a orientação do componente Step * @default 'horizontal' */ "layout": 'horizontal' | 'vertical'; /** * Propriedade que define o tipo de comportamento que o componente Step deverá seguir * @default 'step' */ "mode": 'controller' | 'step'; /** * Propriedade que define o tipo de progressão de etapas que o step vai executar * @default 'nonlinear' */ "progressionType": 'linear' | 'nonlinear'; } /** * ## Design System * Para 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/step?tab=designer). */ interface BrStepItem { /** * Propriedade que define se o item Step está com estado ativo. * @default false */ "active": boolean; /** * Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon * @default '' */ "brIconAria": string; /** * Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon. * @default '' */ "brIconName"?: string; /** * Propriedade que define se o item Step está com estado desativado. * @default false */ "disabled": boolean; /** * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente. */ "handleShowTimeLine": (value: boolean, layout: any) => Promise; /** * Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning". */ "highlight"?: 'success' | 'info' | 'danger' | 'warning'; /** * Propriedade que define o conteúdo do texto auxiliar de realce do item de Step. * @default '' */ "label": string; /** * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem */ "setContent": (value: string) => Promise; /** * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem */ "setContentType": (value: "default" | "br-icon" | "no-content" | "slotted") => Promise; /** * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado */ "setLabelPosition": (value: "top" | "right" | "bottom" | "left") => Promise; /** * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo. */ "setMode": (value: "controller" | "step") => Promise; /** * Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente */ "setStepItemPositionStatus": (value: "first" | "middle" | "last") => Promise; } /** * ## Design System * Para 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/switch?tab=designer). */ interface BrSwitch { /** * 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; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-switch') */ "customId": string; /** * O ajuste da densidade consiste em aumentar ou reduzir a área de interação do switch. Quanto menor for a densidade, maior a área de interação. * @default 'medium' */ "density": 'large' | 'medium' | 'small'; /** * Desativa o switch, tornando-o não interativo. * @default false */ "disabled": boolean; /** * Adiciona um ícone ao switch para indicar a mudança de estado. * @default false */ "hasIcon": boolean; /** * Texto descritivo. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado. */ "label": string; /** * Texto exibido quando o switch está desativado. */ "labelOff": string; /** * Texto exibido quando o switch está ativado. */ "labelOn": string; /** * Posição do rótulo em relação ao switch. * @default 'left' */ "labelPosition": 'right' | 'left' | 'top'; /** * Define o nome do switch, que é utilizado para agrupar switches 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; /** * Inverte o valor da prop `checked` */ "toggleChecked": () => Promise; /** * Define o valor associado ao switch quando ele faz parte de um formulário nativo (``). Esse valor é enviado com o formulário quando o switch está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o switch está selecionado; para verificar o estado de seleção, use a propriedade `checked`. */ "value": string; } /** * ## Design System * Para 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/tab?tab=designer). */ interface BrTab { /** * Define o alinhamento horizontal dos itens da tab na barra de navegação. * @default 'start' */ "alignItemsTab": TabAlignItems; /** * Define se o Tab usará um esquema de cores escuro. */ "colorMode"?: TabColorMode; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId": string; /** * A propriedade 'density' define a densidade do componente. * @default 'medium' */ "density": TabDensity; /** * Define a altura máxima da área de conteúdo, ativando o scroll interno quando o conteúdo ultrapassa essa altura. */ "height"?: string; /** * Label de acessibilidade para a navegação das tabs * @default 'Abas de Navegação' */ "label": string; /** * Desabilita o scroll automático da área de conteúdo. Por padrão, o scroll vertical fica apenas na região de conteúdo. * @default false */ "scrollDisabled": boolean; } /** * ## Design System * Para 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/tab?tab=designer). */ interface BrTabItem { /** * Define se o Tab usará um esquema de cores escuro */ "colorMode": 'dark'; /** * Define contador do item de tab (exibido abaixo do botão) */ "counter": string; /** * Desativa o item de tab, impedindo que seja selecionado pelo usuário. O conteúdo do painel correspondente permanece inacessível enquanto desativado. * @default false */ "disabled": boolean; /** * Define ícone do item de tab */ "icon": string; /** * Define se o item de tab está ativo/visível * @default false */ "isActive": boolean; /** * Define se exibe apenas o ícone, sem texto * @default false */ "onlyIcon": boolean; /** * Identificador único do item da tab. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "tabItemId": string; /** * Define o título do item de tab que aparece no botão de navegação */ "tabItemTitle": string; } /** * ## Design System * Tabela baseada em CSS Grid com controle via tokens. * A tabela é composta de vários subcomponentes, incluindo: * - br-table-header: Define o cabeçalho da tabela, agrupando as linhas de cabeçalho. * - br-table-row: Representa uma linha da tabela, podendo conter células de conteúdo ou células de cabeçalho. * - br-table-header-cell: Representa uma célula de cabeçalho, permitindo a definição de propriedades como largura e alinhamento que podem ser herdadas pelas células de conteúdo associadas. * - br-table-cell: Representa uma célula de conteúdo da tabela, onde os dados são inseridos. * - br-table-body: Agrupa as linhas de conteúdo da tabela, representadas pelo subcomponente br-table-row. * @remarks Para 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/table?tab=designer). * @Slot header: Área para inclusão do subcomponente br-table-header * @Slot body: Área para inclusão do subcomponente br-table-body */ interface BrTable { /** * Largura global aplicada a todas as colunas. * @remarks Valores aceitos: - fill - content - ${number}px - ${number}fr Observação: - `columnWidth` não define o comportamento de `overflow`, mas pode interferir na sua percepção ao alterar o espaço disponível da coluna. - `content` (`max-content`) tende a expandir a coluna e reduzir casos visíveis de truncagem. - `fill` (`1fr`) tende a evidenciar truncagem quando o espaço horizontal é insuficiente. * @default fill */ "columnWidth"?: ColumnWidth; /** * Define a densidade da tabela. * @remarks Valores aceitos: - small - medium - large * @default medium */ "density"?: TableDensity; /** * Define o estilo visual dos divisores. * @remarks Valores aceitos: - solid - dashed * @default solid */ "dividerStyle"?: TableDividerStyle; /** * Ativa divisores verticais entre colunas. * @default false */ "hasColumnDivider"?: boolean; /** * Ativa divisores horizontais entre linhas. * @default false */ "hasRowDivider"?: boolean; /** * Define o alinhamento horizontal do conteúdo das células. * @remarks Valores aceitos: - start - center - end * @default start */ "horizontalAlignment"?: TableAlignment; /** * Define o comportamento de overflow para as células. * @remarks Valores aceitos: - truncate - wrap Observação: - O overflow é independente de `columnWidth`. - Com `columnWidth="content"`, a coluna tende a crescer com o conteúdo (`max-content`), o que pode reduzir casos visíveis de truncagem. - Com `columnWidth="fill"`, a coluna ocupa o espaço disponível (`1fr`), então a truncagem tende a ficar mais evidente quando não há espaço suficiente. * @default wrap */ "overflow"?: TableOverflow; /** * Define o modo de resolução do tooltip nas células da tabela. * @remarks Valores aceitos: - inherit - enabled - disabled * @default disabled (valor efetivo) */ "tooltipMode"?: TableTooltipMode; /** * Define o estado semântico do tooltip nas células da tabela. * @remarks Valores aceitos: - info - warning - danger - success * @default info */ "tooltipState"?: TableTooltipState; /** * Define o alinhamento vertical do conteúdo das células. * @remarks Valores aceitos: - start - center - end * @default start */ "verticalAlignment"?: TableAlignment; } /** * ## Design System * O br-table-body é um subcomponent da tabela que tem a função de agrupar as linhas de conteúdo da tabela, representadas pelo subcomponente br-table-row. * Ele é utilizado para organizar e estruturar o conteúdo do corpo da tabela, permitindo a definição de múltiplas linhas de conteúdo, cada uma contendo células de conteúdo representadas pelo subcomponente br-table-cell. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão do subcomponente br-table-row, que representa as linhas de conteúdo da tabela. */ interface BrTableBody { } /** * ## Design System * O br-table-cell é um subcomponente da tabela que representa uma célula de conteúdo dentro da tabela, sendo utilizado para definir o conteúdo e as propriedades de formatação das células de dados da tabela. * Ele é projetado para ser utilizado dentro do subcomponente br-table-row, que representa uma linha da tabela, permitindo a organização e estruturação do conteúdo das células de dados da tabela. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão de conteúdo da célula de dados da tabela. */ 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; } /** * ## Design System * O br-table-header é um subcomponente estrutural da tabela, responsável por agrupar as linhas de cabeçalho da tabela, representadas pelo subcomponente br-table-row. * Ele é utilizado para organizar e estruturar o conteúdo do cabeçalho da tabela, permitindo a definição de múltiplas linhas de cabeçalho, cada uma contendo células de cabeçalho representadas pelo subcomponente br-table-header-cell. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão do subcomponente br-table-row, que representa as linhas do cabeçalho da tabela. */ interface BrTableHeader { } /** * ## Design System * O br-table-header-cell é um subcomponente da table que representa uma célula de cabeçalho dentro da tabela, sendo utilizado para definir o conteúdo e as propriedades de formatação do cabeçalho da tabela. * Ele é projetado para ser utilizado dentro do subcomponente br-table-row, que representa uma linha da tabela, permitindo a organização e estruturação do conteúdo do cabeçalho da tabela. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão de conteúdo da célula de cabeçalho da tabela. */ interface BrTableHeaderCell { /** * Define a largura da coluna. */ "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; } /** * ## Design System * O br-table-row é um subcomponente da tabela que representa uma linha da tabela, podendo conter células de conteúdo (br-table-cell) ou células de cabeçalho (br-table-header-cell). * Ele é utilizado para organizar e estruturar o conteúdo da tabela, permitindo a definição de propriedades como alinhamento e overflow que podem ser herdadas pelas células associadas. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão de células de conteúdo da tabela, br-table-header-cell e br-table-cell. */ 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; } /** * ## Design System * Para 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/textarea?tag=designer). */ 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; /** * Rótulo personalizado para leitores de tela. Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela. Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações). * @default null */ "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; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default `br-tag-${tagId++}` */ "customId": string; /** * A propriedade 'density' permite definir a densidade do componente. * @default DENSITY_MEDIUM */ "density": 'small' | 'medium' | 'large'; /** * Tag deve estar desabilitado. * @default false */ "disabled": boolean; /** * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto. O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome. * @default '' */ "iconName": string; /** * Interação deve ser habilitada. * @default false */ "interaction": boolean; /** * Interação de seleção deve ser habilitada. * @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; /** * 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; /** * A tag está selecionada. * @default false */ "selected": boolean; /** * A propriedade 'shape' define o formato do componente. * @default SHAPE_DEFAULT */ "shape": 'circle' | 'rounded' | 'default'; /** * 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). * @default false */ "status": boolean; } /** * ## Design System * Para 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/textarea?tab=designer). */ 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; /** * Número de colunas (caracteres) visíveis no textarea. Define a largura do componente em relação ao número de caracteres por linha. */ "cols": number; /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId('br-textarea') */ "customId": string; /** * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'. * @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; /** * 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; /** * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite. * @default 0 */ "maxlength": number; /** * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário. */ "placeholder": string; /** * Número de linhas visíveis no textarea. Define a altura do componente em relação ao número de linhas de texto exibidas. */ "rows": number; /** * 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'. */ "state": 'danger' | 'success' | 'warning'; /** * Valor exibido no textarea. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa. */ "value": string; } /** * ## Design System * Para 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/tooltip?tab=designer). */ interface BrTooltip { /** * Identificador único do tooltip; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId": string; /** * Densidade do tooltip: controla compacidade do conteúdo. * @default 'medium' */ "density": TooltipDensity; /** * Atraso em milissegundos antes de ocultar. * @default null */ "hideDelay": number | null; /** * Oculta o tooltip programaticamente. */ "hideTooltip": () => Promise; /** * Exibe automaticamente sem interação quando true; caso contrário, depende do acionador. * @default false */ "isAutoVisible": boolean; /** * Posição do tooltip em relação ao acionador. * @default 'top' */ "position": TooltipPosition; /** * Define um trigger externo para o tooltip. */ "setTriggerElement": (element: HTMLElement | null) => Promise; /** * Atraso em milissegundos antes de exibir. * @default null */ "showDelay": number | null; /** * Exibe o tooltip programaticamente. */ "showTooltip": () => Promise; /** * Estado visual do tooltip: 'info', 'warning', 'error', 'danger' ou 'success'. * @default 'info' */ "state": TooltipState; /** * Tipo do tooltip: 'standard' (simples) ou 'popover' (mais rico, com fechamento por interação). * @default 'standard' */ "type": TooltipType; } /** * ## Design System */ interface BrUpload { /** * Tipos de arquivo permitidos (ex.: 'image/*'). * @default '' */ "accept": string; /** * Identificador único do componente; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-upload') */ "customId": string; /** * Desativa interação e seleção de arquivos quando true. * @default false */ "disabled": boolean; /** * Rótulo exibido acima do botão de upload. * @default 'Envio de arquivo' */ "label": string; /** * Indica se o componente permite a seleção de múltiplos arquivos. Quando definido como `true`, o usuário pode selecionar mais de um arquivo para upload. * @default false */ "multiple": boolean; /** * Estado visual: 'info', 'warning', 'danger' ou 'success'. */ "state": 'info' | 'warning' | 'danger' | 'success'; /** * Lista de arquivos já enviados (para edição ou pré-visualização). Pode ser uma string JSON ou um array de objetos IUploadFile. * @default [] */ "uploadFiles": string | IUploadFile[]; } /** * ## Design System * Para 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/wizard?tab=designer). */ interface BrWizard { /** * ID customizado para o componente. Se não fornecido, um ID único será gerado automaticamente. * @default Helpers.generateUniqueId() */ "customId": string; /** * Retorna todos os painéis do wizard. * @returns Promise */ "getAllSteps": () => Promise; /** * Retorna o elemento HTML do painel ativo no momento. * @returns Promise */ "getCurrentStep": () => Promise; /** * Retorna o índice (número) da etapa atual. A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc). * @returns Promise */ "getCurrentStepIndex": () => Promise; /** * Retorna um painel específico pelo índice. * @param stepNumber - Número da etapa (numeração começa em 1) * @returns Promise */ "getStepByIndex": (stepNumber: number) => Promise; /** * Retorna o número total de etapas do wizard. * @returns Promise */ "getTotalSteps": () => Promise; /** * Navega para uma etapa específica. Executa validação se estiver avançando (etapa alvo > etapa atual). * @param stepNumber - Número da etapa de destino (numeração começa em 1) * @returns Promise - true se navegou com sucesso, false se bloqueado */ "goToStep": (stepNumber: number) => Promise; /** * Índice da etapa inicial do wizard. Define qual etapa será exibida ao carregar o componente. A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc). * @default 1 */ "initialStep": number; /** * Avança para a próxima etapa. Executa validação via evento `brWizardBeforeStepChange` antes de navegar. * @returns Promise - true se navegou com sucesso, false se bloqueado */ "nextStep": () => Promise; /** * Orientação visual do wizard. Define se os indicadores de progresso serão exibidos horizontalmente ou verticalmente. * @default 'horizontal' */ "orientation": 'horizontal' | 'vertical'; /** * Volta para a etapa anterior. Não executa validação ao retornar. * @returns Promise - true se navegou com sucesso, false se bloqueado */ "previousStep": () => Promise; /** * Tipo de progressão entre etapas. - `linear`: O usuário deve completar cada etapa sequencialmente. Não é possível pular etapas futuras. - `nonlinear`: O usuário pode navegar livremente entre qualquer etapa. * @default 'nonlinear' */ "progressionType": 'linear' | 'nonlinear'; /** * Retorna à primeira etapa do wizard. Não executa validação (útil para reiniciar o fluxo). * @returns Promise */ "reset": () => Promise; } /** * Wizard Panel (Painel de etapa do Wizard) * Representa uma etapa individual dentro do br-wizard. */ interface BrWizardPanel { /** * Retorna se o painel está ativo */ "isActive": () => Promise; /** * Label do painel (aparece no indicador de progresso) */ "label": string; /** * Define se o painel está ativo */ "setActive": (value: boolean) => Promise; /** * Define o índice do painel */ "setIndex": (value: number) => Promise; } } export interface BrCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLBrCheckboxElement; } export interface BrCollapseCustomEvent extends CustomEvent { detail: T; target: HTMLBrCollapseElement; } export interface BrCrumbCustomEvent extends CustomEvent { detail: T; target: HTMLBrCrumbElement; } export interface BrDatetimePickerCustomEvent extends CustomEvent { detail: T; target: HTMLBrDatetimePickerElement; } export interface BrDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLBrDropdownElement; } export interface BrHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLBrHeaderElement; } export interface BrHeaderListCustomEvent extends CustomEvent { detail: T; target: HTMLBrHeaderListElement; } export interface BrInputCustomEvent extends CustomEvent { detail: T; target: HTMLBrInputElement; } export interface BrItemCustomEvent extends CustomEvent { detail: T; target: HTMLBrItemElement; } export interface BrLoadingCustomEvent extends CustomEvent { detail: T; target: HTMLBrLoadingElement; } export interface BrMenuHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLBrMenuHeaderElement; } export interface BrMenuLinkCustomEvent extends CustomEvent { detail: T; target: HTMLBrMenuLinkElement; } export interface BrMenuListCustomEvent extends CustomEvent { detail: T; target: HTMLBrMenuListElement; } export interface BrMenuSocialCustomEvent extends CustomEvent { detail: T; target: HTMLBrMenuSocialElement; } export interface BrMessageCustomEvent extends CustomEvent { detail: T; target: HTMLBrMessageElement; } export interface BrModalCustomEvent extends CustomEvent { detail: T; target: HTMLBrModalElement; } export interface BrPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLBrPaginationElement; } export interface BrRadioCustomEvent extends CustomEvent { detail: T; target: HTMLBrRadioElement; } export interface BrScrimCustomEvent extends CustomEvent { detail: T; target: HTMLBrScrimElement; } export interface BrSelectCustomEvent extends CustomEvent { detail: T; target: HTMLBrSelectElement; } export interface BrSelectOptionCustomEvent extends CustomEvent { detail: T; target: HTMLBrSelectOptionElement; } export interface BrSkipLinkCustomEvent extends CustomEvent { detail: T; target: HTMLBrSkipLinkElement; } export interface BrSkiplinkItemCustomEvent extends CustomEvent { detail: T; target: HTMLBrSkiplinkItemElement; } export interface BrStepCustomEvent extends CustomEvent { detail: T; target: HTMLBrStepElement; } export interface BrStepItemCustomEvent extends CustomEvent { detail: T; target: HTMLBrStepItemElement; } export interface BrSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLBrSwitchElement; } export interface BrTabCustomEvent extends CustomEvent { detail: T; target: HTMLBrTabElement; } export interface BrTabItemCustomEvent extends CustomEvent { detail: T; target: HTMLBrTabItemElement; } export interface BrTableCellCustomEvent extends CustomEvent { detail: T; target: HTMLBrTableCellElement; } export interface BrTableHeaderCellCustomEvent extends CustomEvent { detail: T; target: HTMLBrTableHeaderCellElement; } export interface BrTableRowCustomEvent extends CustomEvent { detail: T; target: HTMLBrTableRowElement; } export interface BrTagCustomEvent extends CustomEvent { detail: T; target: HTMLBrTagElement; } export interface BrTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLBrTextareaElement; } export interface BrTooltipCustomEvent extends CustomEvent { detail: T; target: HTMLBrTooltipElement; } export interface BrUploadCustomEvent extends CustomEvent { detail: T; target: HTMLBrUploadElement; } export interface BrWizardCustomEvent extends CustomEvent { detail: T; target: HTMLBrWizardElement; } declare global { /** * ## Design System * Para 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/avatar?tab=designer). */ interface HTMLBrAvatarElement extends Components.BrAvatar, HTMLStencilElement { } var HTMLBrAvatarElement: { prototype: HTMLBrAvatarElement; new (): HTMLBrAvatarElement; }; /** * ## Design System * Para 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/breadcrumb?tab=designer). */ interface HTMLBrBreadcrumbElement extends Components.BrBreadcrumb, HTMLStencilElement { } var HTMLBrBreadcrumbElement: { prototype: HTMLBrBreadcrumbElement; new (): HTMLBrBreadcrumbElement; }; /** * ## Design System * Para 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/button?tab=designer). */ interface HTMLBrButtonElement extends Components.BrButton, HTMLStencilElement { } var HTMLBrButtonElement: { prototype: HTMLBrButtonElement; new (): HTMLBrButtonElement; }; /** * ## Design System * Para 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/card?tab=designer). */ interface HTMLBrCardElement extends Components.BrCard, HTMLStencilElement { } var HTMLBrCardElement: { prototype: HTMLBrCardElement; new (): HTMLBrCardElement; }; interface HTMLBrCheckboxElementEventMap { "checkedChange": boolean; "indeterminateChange": boolean; } /** * ## Design System * Para 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). */ interface HTMLBrCheckboxElement extends Components.BrCheckbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrCheckboxElement, ev: BrCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrCheckboxElement, ev: BrCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrCheckboxElement: { prototype: HTMLBrCheckboxElement; new (): HTMLBrCheckboxElement; }; /** * ## Design System * Para 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). */ interface HTMLBrCheckgroupElement extends Components.BrCheckgroup, HTMLStencilElement { } var HTMLBrCheckgroupElement: { prototype: HTMLBrCheckgroupElement; new (): HTMLBrCheckgroupElement; }; interface HTMLBrCollapseElementEventMap { "brDidOpen": { id: string; accordionGroup: string }; "brDidClose": { id: string; accordionGroup: string }; } /** * ## Design System * Para 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/collapse?tab=designer). */ interface HTMLBrCollapseElement extends Components.BrCollapse, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrCollapseElement, ev: BrCollapseCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrCollapseElement, ev: BrCollapseCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrCollapseElement: { prototype: HTMLBrCollapseElement; new (): HTMLBrCollapseElement; }; interface HTMLBrCrumbElementEventMap { "brCrumbPropsChange": void; } /** * ## Design System * Para 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/breadcrumb?tab=designer). */ interface HTMLBrCrumbElement extends Components.BrCrumb, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrCrumbElement, ev: BrCrumbCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrCrumbElement, ev: BrCrumbCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrCrumbElement: { prototype: HTMLBrCrumbElement; new (): HTMLBrCrumbElement; }; interface HTMLBrDatetimePickerElementEventMap { "brDateTimeChange": Date | null; } /** * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/datetime-picker?tab=designer). */ interface HTMLBrDatetimePickerElement extends Components.BrDatetimePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrDatetimePickerElement, ev: BrDatetimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrDatetimePickerElement, ev: BrDatetimePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrDatetimePickerElement: { prototype: HTMLBrDatetimePickerElement; new (): HTMLBrDatetimePickerElement; }; /** * ## Design System * Para 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/divider?tab=designer). */ interface HTMLBrDividerElement extends Components.BrDivider, HTMLStencilElement { } var HTMLBrDividerElement: { prototype: HTMLBrDividerElement; new (): HTMLBrDividerElement; }; interface HTMLBrDropdownElementEventMap { "brDropdownChange": { isOpen: boolean }; "brDidOpen": { id: string }; } /** * ## Design System * Para 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/dropdown?tab=designer). */ interface HTMLBrDropdownElement extends Components.BrDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrDropdownElement, ev: BrDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrDropdownElement, ev: BrDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrDropdownElement: { prototype: HTMLBrDropdownElement; new (): HTMLBrDropdownElement; }; /** * ## Design System * Para 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/footer?tab=designer). */ interface HTMLBrFooterElement extends Components.BrFooter, HTMLStencilElement { } var HTMLBrFooterElement: { prototype: HTMLBrFooterElement; new (): HTMLBrFooterElement; }; /** * ## Design System * Para 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/footer?tab=designer). */ interface HTMLBrFooterCategoryElement extends Components.BrFooterCategory, HTMLStencilElement { } var HTMLBrFooterCategoryElement: { prototype: HTMLBrFooterCategoryElement; new (): HTMLBrFooterCategoryElement; }; /** * ## Design System * Para 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/footer?tab=designer). */ interface HTMLBrFooterItemElement extends Components.BrFooterItem, HTMLStencilElement { } var HTMLBrFooterItemElement: { prototype: HTMLBrFooterItemElement; new (): HTMLBrFooterItemElement; }; /** * ## Design System * Para 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/footer?tab=designer). */ interface HTMLBrFooterLegalElement extends Components.BrFooterLegal, HTMLStencilElement { } var HTMLBrFooterLegalElement: { prototype: HTMLBrFooterLegalElement; new (): HTMLBrFooterLegalElement; }; /** * ## Design System * Para 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/footer?tab=designer). */ interface HTMLBrFooterLogoElement extends Components.BrFooterLogo, HTMLStencilElement { } var HTMLBrFooterLogoElement: { prototype: HTMLBrFooterLogoElement; new (): HTMLBrFooterLogoElement; }; /** * 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 HTMLBrFooterSocialElement extends Components.BrFooterSocial, HTMLStencilElement { } var HTMLBrFooterSocialElement: { prototype: HTMLBrFooterSocialElement; new (): HTMLBrFooterSocialElement; }; interface HTMLBrHeaderElementEventMap { "headerCompactChange": { parentId: string; isCompact: boolean }; "headerWidthChange": { id: string; listNames: ('links' | 'functions')[]; shrink: boolean }; } /** * ## Design System * Para 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/header?tab=designer). */ interface HTMLBrHeaderElement extends Components.BrHeader, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrHeaderElement, ev: BrHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrHeaderElement, ev: BrHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrHeaderElement: { prototype: HTMLBrHeaderElement; new (): HTMLBrHeaderElement; }; /** * ## Design System * Para 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/header?tab=designer). */ interface HTMLBrHeaderFunctionElement extends Components.BrHeaderFunction, HTMLStencilElement { } var HTMLBrHeaderFunctionElement: { prototype: HTMLBrHeaderFunctionElement; new (): HTMLBrHeaderFunctionElement; }; /** * ## Design System * Para 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/header?tab=designer). */ interface HTMLBrHeaderLinkElement extends Components.BrHeaderLink, HTMLStencilElement { } var HTMLBrHeaderLinkElement: { prototype: HTMLBrHeaderLinkElement; new (): HTMLBrHeaderLinkElement; }; interface HTMLBrHeaderListElementEventMap { "headerListUpdate": { id: string; listName: string }; "headerListFocused": { id: string }; } /** * ## Design System * Para 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/header?tab=designer). */ interface HTMLBrHeaderListElement extends Components.BrHeaderList, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrHeaderListElement, ev: BrHeaderListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrHeaderListElement, ev: BrHeaderListCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrHeaderListElement: { prototype: HTMLBrHeaderListElement; new (): HTMLBrHeaderListElement; }; /** * ## Design System * Para 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/header?tab=designer). */ interface HTMLBrHeaderLogoElement extends Components.BrHeaderLogo, HTMLStencilElement { } var HTMLBrHeaderLogoElement: { prototype: HTMLBrHeaderLogoElement; new (): HTMLBrHeaderLogoElement; }; /** * 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 HTMLBrIconElement extends Components.BrIcon, HTMLStencilElement { } var HTMLBrIconElement: { prototype: HTMLBrIconElement; new (): HTMLBrIconElement; }; interface HTMLBrInputElementEventMap { "valueChange": string; } /** * ## Design System * Para 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/input?tab=designer). */ interface HTMLBrInputElement extends Components.BrInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrInputElement, ev: BrInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrInputElement, ev: BrInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrInputElement: { prototype: HTMLBrInputElement; new (): HTMLBrInputElement; }; interface HTMLBrItemElementEventMap { "brDidClick": any; "brDidSelect": { selected: boolean }; } /** * ## Design System * Para 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/item?tab=designer). */ interface HTMLBrItemElement extends Components.BrItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrItemElement, ev: BrItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrItemElement, ev: BrItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrItemElement: { prototype: HTMLBrItemElement; new (): HTMLBrItemElement; }; /** * ## Design System * Para 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/list?tab=designer). */ interface HTMLBrListElement extends Components.BrList, HTMLStencilElement { } var HTMLBrListElement: { prototype: HTMLBrListElement; new (): HTMLBrListElement; }; interface HTMLBrLoadingElementEventMap { "brLoadingChange": LoadingChangeDetail; "brLoadingComplete": LoadingCompleteDetail; "brLoadingReset": LoadingValueDetail; "brLoadingCancel": LoadingValueDetail; "brIndeterminateStateChange": LoadingIndeterminateStateDetail; "brDidShow": void; "brDidHide": void; } /** * ## Design System * Para 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/loading?tab=designer). */ interface HTMLBrLoadingElement extends Components.BrLoading, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrLoadingElement, ev: BrLoadingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrLoadingElement, ev: BrLoadingCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrLoadingElement: { prototype: HTMLBrLoadingElement; new (): HTMLBrLoadingElement; }; /** * ## Design System * Para 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/magic-button?tab=designer). */ interface HTMLBrMagicButtonElement extends Components.BrMagicButton, HTMLStencilElement { } var HTMLBrMagicButtonElement: { prototype: HTMLBrMagicButtonElement; new (): HTMLBrMagicButtonElement; }; /** * ## Design System * Para 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/menu?tab=designer). */ interface HTMLBrMenuElement extends Components.BrMenu, HTMLStencilElement { } var HTMLBrMenuElement: { prototype: HTMLBrMenuElement; new (): HTMLBrMenuElement; }; interface HTMLBrMenuHeaderElementEventMap { "brMenuHeaderClose": void; } /** * ## Design System * Para 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/menu-header?tab=designer). */ interface HTMLBrMenuHeaderElement extends Components.BrMenuHeader, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrMenuHeaderElement, ev: BrMenuHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrMenuHeaderElement, ev: BrMenuHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrMenuHeaderElement: { prototype: HTMLBrMenuHeaderElement; new (): HTMLBrMenuHeaderElement; }; /** * ## Design System * Para 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/menu-info?tab=designer). */ interface HTMLBrMenuInfoElement extends Components.BrMenuInfo, HTMLStencilElement { } var HTMLBrMenuInfoElement: { prototype: HTMLBrMenuInfoElement; new (): HTMLBrMenuInfoElement; }; /** * ## Design System * Para 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/menu?tab=designer). */ interface HTMLBrMenuItemElement extends Components.BrMenuItem, HTMLStencilElement { } var HTMLBrMenuItemElement: { prototype: HTMLBrMenuItemElement; new (): HTMLBrMenuItemElement; }; interface HTMLBrMenuLinkElementEventMap { "brLinkClick": void; } /** * ## Design System * Para 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/menu?tab=designer). */ interface HTMLBrMenuLinkElement extends Components.BrMenuLink, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrMenuLinkElement, ev: BrMenuLinkCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrMenuLinkElement, ev: BrMenuLinkCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrMenuLinkElement: { prototype: HTMLBrMenuLinkElement; new (): HTMLBrMenuLinkElement; }; interface HTMLBrMenuListElementEventMap { "folderToggled": boolean; "navigateToSubmenu": { element: HTMLElement; label: string }; } /** * ## Design System * Para 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/menu?tab=designer). */ interface HTMLBrMenuListElement extends Components.BrMenuList, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrMenuListElement, ev: BrMenuListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrMenuListElement, ev: BrMenuListCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrMenuListElement: { prototype: HTMLBrMenuListElement; new (): HTMLBrMenuListElement; }; /** * ## Design System * Para 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/menu?tab=designer). */ interface HTMLBrMenuLogoElement extends Components.BrMenuLogo, HTMLStencilElement { } var HTMLBrMenuLogoElement: { prototype: HTMLBrMenuLogoElement; new (): HTMLBrMenuLogoElement; }; interface HTMLBrMenuSocialElementEventMap { "brSocialClick": void; } /** * ## Design System * Para 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/menu?tab=designer). */ interface HTMLBrMenuSocialElement extends Components.BrMenuSocial, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrMenuSocialElement, ev: BrMenuSocialCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrMenuSocialElement, ev: BrMenuSocialCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrMenuSocialElement: { prototype: HTMLBrMenuSocialElement; new (): HTMLBrMenuSocialElement; }; interface HTMLBrMessageElementEventMap { "brDidClose": any; } /** * ## Design System * Para 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/message?tab=designer). */ interface HTMLBrMessageElement extends Components.BrMessage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrMessageElement, ev: BrMessageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrMessageElement, ev: BrMessageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrMessageElement: { prototype: HTMLBrMessageElement; new (): HTMLBrMessageElement; }; interface HTMLBrModalElementEventMap { "brModalOpen": void; "brModalClose": void; "brModalBeforeClose": void; "brModalOpened": void; } /** * ## Design System * Para 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/modal?tab=designer). */ interface HTMLBrModalElement extends Components.BrModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrModalElement, ev: BrModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrModalElement, ev: BrModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrModalElement: { prototype: HTMLBrModalElement; new (): HTMLBrModalElement; }; interface HTMLBrPaginationElementEventMap { "pageChange": { page: number }; "perPageChange": { perPage: number }; } /** * ## Design System * Para 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/pagination?tab=designer). */ interface HTMLBrPaginationElement extends Components.BrPagination, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrPaginationElement, ev: BrPaginationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrPaginationElement, ev: BrPaginationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrPaginationElement: { prototype: HTMLBrPaginationElement; new (): HTMLBrPaginationElement; }; interface HTMLBrRadioElementEventMap { "checkedChange": boolean; } /** * ## Design System * Para 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/radio?tab=designer). */ interface HTMLBrRadioElement extends Components.BrRadio, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrRadioElement, ev: BrRadioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrRadioElement, ev: BrRadioCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrRadioElement: { prototype: HTMLBrRadioElement; new (): HTMLBrRadioElement; }; interface HTMLBrScrimElementEventMap { "brScrimOpen": void; "brScrimClose": void; } /** * ## Design System * Para 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/scrim?tab=designer). */ interface HTMLBrScrimElement extends Components.BrScrim, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrScrimElement, ev: BrScrimCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrScrimElement, ev: BrScrimCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrScrimElement: { prototype: HTMLBrScrimElement; new (): HTMLBrScrimElement; }; interface HTMLBrSelectElementEventMap { "valueChange": any; "optionHover": { label: string; value: string }; "opened": void; "closed": void; } /** * ## Design System * Para 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/select?tab=designer). */ interface HTMLBrSelectElement extends Components.BrSelect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrSelectElement, ev: BrSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrSelectElement, ev: BrSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrSelectElement: { prototype: HTMLBrSelectElement; new (): HTMLBrSelectElement; }; interface HTMLBrSelectOptionElementEventMap { "brSelectOptionPropsChange": void; } /** * ## Design System * O `br-select-option` é um subcomponente lógico de `br-select`, usado para * declarar opções de forma declarativa no HTML. */ interface HTMLBrSelectOptionElement extends Components.BrSelectOption, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrSelectOptionElement, ev: BrSelectOptionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrSelectOptionElement, ev: BrSelectOptionCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrSelectOptionElement: { prototype: HTMLBrSelectOptionElement; new (): HTMLBrSelectOptionElement; }; /** * ## Design System * Para 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/sign-in?tab=designer). */ interface HTMLBrSignInElement extends Components.BrSignIn, HTMLStencilElement { } var HTMLBrSignInElement: { prototype: HTMLBrSignInElement; new (): HTMLBrSignInElement; }; interface HTMLBrSkipLinkElementEventMap { "brSkiplinkNavigation": { itemId: string; target: string }; "brDidShow": void; "brDidHide": void; } /** * ## Design System * Para 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/skip-link?tab=designer). */ interface HTMLBrSkipLinkElement extends Components.BrSkipLink, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrSkipLinkElement, ev: BrSkipLinkCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrSkipLinkElement, ev: BrSkipLinkCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrSkipLinkElement: { prototype: HTMLBrSkipLinkElement; new (): HTMLBrSkipLinkElement; }; interface HTMLBrSkiplinkItemElementEventMap { "brSkiplinkItemClick": { itemId: string; target: string }; "brSkiplinkItemFocus": { itemId: string }; } /** * ## Design System * Para 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/skip-link?tab=designer). */ interface HTMLBrSkiplinkItemElement extends Components.BrSkiplinkItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrSkiplinkItemElement, ev: BrSkiplinkItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrSkiplinkItemElement, ev: BrSkiplinkItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrSkiplinkItemElement: { prototype: HTMLBrSkiplinkItemElement; new (): HTMLBrSkiplinkItemElement; }; interface HTMLBrStepElementEventMap { "brDidLoad": void; "brWillLoad": void; "brShouldUpdate": void; "brStepChange": { activeStep: number }; } /** * ## Design System * Para 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/step?tab=designer). */ interface HTMLBrStepElement extends Components.BrStep, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrStepElement, ev: BrStepCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrStepElement, ev: BrStepCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrStepElement: { prototype: HTMLBrStepElement; new (): HTMLBrStepElement; }; interface HTMLBrStepItemElementEventMap { "brWillRender": void; "brDidRender": void; } /** * ## Design System * Para 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/step?tab=designer). */ interface HTMLBrStepItemElement extends Components.BrStepItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrStepItemElement, ev: BrStepItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrStepItemElement, ev: BrStepItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrStepItemElement: { prototype: HTMLBrStepItemElement; new (): HTMLBrStepItemElement; }; interface HTMLBrSwitchElementEventMap { "checkedChange": boolean; } /** * ## Design System * Para 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/switch?tab=designer). */ interface HTMLBrSwitchElement extends Components.BrSwitch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrSwitchElement, ev: BrSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrSwitchElement, ev: BrSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrSwitchElement: { prototype: HTMLBrSwitchElement; new (): HTMLBrSwitchElement; }; interface HTMLBrTabElementEventMap { "brTabChange": { tabId: string; tabIndex: number }; } /** * ## Design System * Para 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/tab?tab=designer). */ interface HTMLBrTabElement extends Components.BrTab, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTabElement, ev: BrTabCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTabElement, ev: BrTabCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTabElement: { prototype: HTMLBrTabElement; new (): HTMLBrTabElement; }; interface HTMLBrTabItemElementEventMap { "brTabItemPropsChange": void; } /** * ## Design System * Para 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/tab?tab=designer). */ interface HTMLBrTabItemElement extends Components.BrTabItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTabItemElement, ev: BrTabItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTabItemElement, ev: BrTabItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTabItemElement: { prototype: HTMLBrTabItemElement; new (): HTMLBrTabItemElement; }; /** * ## Design System * Tabela baseada em CSS Grid com controle via tokens. * A tabela é composta de vários subcomponentes, incluindo: * - br-table-header: Define o cabeçalho da tabela, agrupando as linhas de cabeçalho. * - br-table-row: Representa uma linha da tabela, podendo conter células de conteúdo ou células de cabeçalho. * - br-table-header-cell: Representa uma célula de cabeçalho, permitindo a definição de propriedades como largura e alinhamento que podem ser herdadas pelas células de conteúdo associadas. * - br-table-cell: Representa uma célula de conteúdo da tabela, onde os dados são inseridos. * - br-table-body: Agrupa as linhas de conteúdo da tabela, representadas pelo subcomponente br-table-row. * @remarks Para 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/table?tab=designer). * @Slot header: Área para inclusão do subcomponente br-table-header * @Slot body: Área para inclusão do subcomponente br-table-body */ interface HTMLBrTableElement extends Components.BrTable, HTMLStencilElement { } var HTMLBrTableElement: { prototype: HTMLBrTableElement; new (): HTMLBrTableElement; }; /** * ## Design System * O br-table-body é um subcomponent da tabela que tem a função de agrupar as linhas de conteúdo da tabela, representadas pelo subcomponente br-table-row. * Ele é utilizado para organizar e estruturar o conteúdo do corpo da tabela, permitindo a definição de múltiplas linhas de conteúdo, cada uma contendo células de conteúdo representadas pelo subcomponente br-table-cell. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão do subcomponente br-table-row, que representa as linhas de conteúdo da tabela. */ interface HTMLBrTableBodyElement extends Components.BrTableBody, HTMLStencilElement { } var HTMLBrTableBodyElement: { prototype: HTMLBrTableBodyElement; new (): HTMLBrTableBodyElement; }; interface HTMLBrTableCellElementEventMap { "brAlignmentChange": void; "brOverflowChange": void; } /** * ## Design System * O br-table-cell é um subcomponente da tabela que representa uma célula de conteúdo dentro da tabela, sendo utilizado para definir o conteúdo e as propriedades de formatação das células de dados da tabela. * Ele é projetado para ser utilizado dentro do subcomponente br-table-row, que representa uma linha da tabela, permitindo a organização e estruturação do conteúdo das células de dados da tabela. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão de conteúdo da célula de dados da tabela. */ interface HTMLBrTableCellElement extends Components.BrTableCell, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTableCellElement, ev: BrTableCellCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTableCellElement, ev: BrTableCellCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTableCellElement: { prototype: HTMLBrTableCellElement; new (): HTMLBrTableCellElement; }; /** * ## Design System * O br-table-header é um subcomponente estrutural da tabela, responsável por agrupar as linhas de cabeçalho da tabela, representadas pelo subcomponente br-table-row. * Ele é utilizado para organizar e estruturar o conteúdo do cabeçalho da tabela, permitindo a definição de múltiplas linhas de cabeçalho, cada uma contendo células de cabeçalho representadas pelo subcomponente br-table-header-cell. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão do subcomponente br-table-row, que representa as linhas do cabeçalho da tabela. */ interface HTMLBrTableHeaderElement extends Components.BrTableHeader, HTMLStencilElement { } var HTMLBrTableHeaderElement: { prototype: HTMLBrTableHeaderElement; new (): HTMLBrTableHeaderElement; }; interface HTMLBrTableHeaderCellElementEventMap { "brColumnWidthChange": void; "brAlignmentChange": void; "brOverflowChange": void; } /** * ## Design System * O br-table-header-cell é um subcomponente da table que representa uma célula de cabeçalho dentro da tabela, sendo utilizado para definir o conteúdo e as propriedades de formatação do cabeçalho da tabela. * Ele é projetado para ser utilizado dentro do subcomponente br-table-row, que representa uma linha da tabela, permitindo a organização e estruturação do conteúdo do cabeçalho da tabela. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão de conteúdo da célula de cabeçalho da tabela. */ interface HTMLBrTableHeaderCellElement extends Components.BrTableHeaderCell, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTableHeaderCellElement, ev: BrTableHeaderCellCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTableHeaderCellElement, ev: BrTableHeaderCellCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTableHeaderCellElement: { prototype: HTMLBrTableHeaderCellElement; new (): HTMLBrTableHeaderCellElement; }; interface HTMLBrTableRowElementEventMap { "brAlignmentChange": void; "brOverflowChange": void; } /** * ## Design System * O br-table-row é um subcomponente da tabela que representa uma linha da tabela, podendo conter células de conteúdo (br-table-cell) ou células de cabeçalho (br-table-header-cell). * Ele é utilizado para organizar e estruturar o conteúdo da tabela, permitindo a definição de propriedades como alinhamento e overflow que podem ser herdadas pelas células associadas. * @remarks Para 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/table?tab=designer). * @Slot default: Área para inclusão de células de conteúdo da tabela, br-table-header-cell e br-table-cell. */ interface HTMLBrTableRowElement extends Components.BrTableRow, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTableRowElement, ev: BrTableRowCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTableRowElement, ev: BrTableRowCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTableRowElement: { prototype: HTMLBrTableRowElement; new (): HTMLBrTableRowElement; }; interface HTMLBrTagElementEventMap { "radioSelected": string; } /** * ## Design System * Para 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/textarea?tag=designer). */ interface HTMLBrTagElement extends Components.BrTag, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTagElement, ev: BrTagCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTagElement, ev: BrTagCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTagElement: { prototype: HTMLBrTagElement; new (): HTMLBrTagElement; }; interface HTMLBrTextareaElementEventMap { "valueChange": string; } /** * ## Design System * Para 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/textarea?tab=designer). */ interface HTMLBrTextareaElement extends Components.BrTextarea, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTextareaElement, ev: BrTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTextareaElement, ev: BrTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTextareaElement: { prototype: HTMLBrTextareaElement; new (): HTMLBrTextareaElement; }; interface HTMLBrTooltipElementEventMap { "brDidOpen": { id: string; visible: boolean }; "brDidClose": { id: string; visible: boolean }; } /** * ## Design System * Para 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/tooltip?tab=designer). */ interface HTMLBrTooltipElement extends Components.BrTooltip, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrTooltipElement, ev: BrTooltipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrTooltipElement, ev: BrTooltipCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrTooltipElement: { prototype: HTMLBrTooltipElement; new (): HTMLBrTooltipElement; }; interface HTMLBrUploadElementEventMap { "selectedFilesChange": FileList; "brRemove": IUploadFile; } /** * ## Design System */ interface HTMLBrUploadElement extends Components.BrUpload, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrUploadElement, ev: BrUploadCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrUploadElement, ev: BrUploadCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrUploadElement: { prototype: HTMLBrUploadElement; new (): HTMLBrUploadElement; }; interface HTMLBrWizardElementEventMap { "brWizardStepChange": number; "brWizardBeforeStepChange": number; "brWizardComplete": void; "brWizardCancel": void; "brWizardNavigationBlocked": string; } /** * ## Design System * Para 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/wizard?tab=designer). */ interface HTMLBrWizardElement extends Components.BrWizard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLBrWizardElement, ev: BrWizardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLBrWizardElement, ev: BrWizardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLBrWizardElement: { prototype: HTMLBrWizardElement; new (): HTMLBrWizardElement; }; /** * Wizard Panel (Painel de etapa do Wizard) * Representa uma etapa individual dentro do br-wizard. */ interface HTMLBrWizardPanelElement extends Components.BrWizardPanel, HTMLStencilElement { } var HTMLBrWizardPanelElement: { prototype: HTMLBrWizardPanelElement; new (): HTMLBrWizardPanelElement; }; interface HTMLElementTagNameMap { "br-avatar": HTMLBrAvatarElement; "br-breadcrumb": HTMLBrBreadcrumbElement; "br-button": HTMLBrButtonElement; "br-card": HTMLBrCardElement; "br-checkbox": HTMLBrCheckboxElement; "br-checkgroup": HTMLBrCheckgroupElement; "br-collapse": HTMLBrCollapseElement; "br-crumb": HTMLBrCrumbElement; "br-datetime-picker": HTMLBrDatetimePickerElement; "br-divider": HTMLBrDividerElement; "br-dropdown": HTMLBrDropdownElement; "br-footer": HTMLBrFooterElement; "br-footer-category": HTMLBrFooterCategoryElement; "br-footer-item": HTMLBrFooterItemElement; "br-footer-legal": HTMLBrFooterLegalElement; "br-footer-logo": HTMLBrFooterLogoElement; "br-footer-social": HTMLBrFooterSocialElement; "br-header": HTMLBrHeaderElement; "br-header-function": HTMLBrHeaderFunctionElement; "br-header-link": HTMLBrHeaderLinkElement; "br-header-list": HTMLBrHeaderListElement; "br-header-logo": HTMLBrHeaderLogoElement; "br-icon": HTMLBrIconElement; "br-input": HTMLBrInputElement; "br-item": HTMLBrItemElement; "br-list": HTMLBrListElement; "br-loading": HTMLBrLoadingElement; "br-magic-button": HTMLBrMagicButtonElement; "br-menu": HTMLBrMenuElement; "br-menu-header": HTMLBrMenuHeaderElement; "br-menu-info": HTMLBrMenuInfoElement; "br-menu-item": HTMLBrMenuItemElement; "br-menu-link": HTMLBrMenuLinkElement; "br-menu-list": HTMLBrMenuListElement; "br-menu-logo": HTMLBrMenuLogoElement; "br-menu-social": HTMLBrMenuSocialElement; "br-message": HTMLBrMessageElement; "br-modal": HTMLBrModalElement; "br-pagination": HTMLBrPaginationElement; "br-radio": HTMLBrRadioElement; "br-scrim": HTMLBrScrimElement; "br-select": HTMLBrSelectElement; "br-select-option": HTMLBrSelectOptionElement; "br-sign-in": HTMLBrSignInElement; "br-skip-link": HTMLBrSkipLinkElement; "br-skiplink-item": HTMLBrSkiplinkItemElement; "br-step": HTMLBrStepElement; "br-step-item": HTMLBrStepItemElement; "br-switch": HTMLBrSwitchElement; "br-tab": HTMLBrTabElement; "br-tab-item": HTMLBrTabItemElement; "br-table": HTMLBrTableElement; "br-table-body": HTMLBrTableBodyElement; "br-table-cell": HTMLBrTableCellElement; "br-table-header": HTMLBrTableHeaderElement; "br-table-header-cell": HTMLBrTableHeaderCellElement; "br-table-row": HTMLBrTableRowElement; "br-tag": HTMLBrTagElement; "br-textarea": HTMLBrTextareaElement; "br-tooltip": HTMLBrTooltipElement; "br-upload": HTMLBrUploadElement; "br-wizard": HTMLBrWizardElement; "br-wizard-panel": HTMLBrWizardPanelElement; } } declare namespace LocalJSX { /** * ## Design System * Para 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/avatar?tab=designer). */ 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"; /** * Permite definir a cor de fundo do componente. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não especificada, usa a cor padrão do tema. * @default '#DBE8FB' */ "bgColor"?: string; /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-avatar') */ "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; } /** * ## Design System * Para 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/breadcrumb?tab=designer). */ 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; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-breadcrumb') */ "customId"?: string; /** * Caso não seja fornecido, o valor padrão será /. * @default '/' */ "homeUrl"?: string; } /** * ## Design System * Para 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/button?tab=designer). */ 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; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-button') */ "customId"?: string; /** * Define o índice de tabulação do botão. Ú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. */ "customTabIndex"?: number; /** * 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. */ "shape"?: 'circle' | 'block' | 'pill'; /** * Define o tipo de botão, especificando seu comportamento padrão. */ "type"?: 'button' | 'reset' | 'submit'; /** * Define o valor inicial do botão em um formulário. */ "value"?: string; } /** * ## Design System * Para 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/card?tab=designer). */ interface BrCard { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId('br-card') */ "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; } /** * ## Design System * Para 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). */ 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; /** * Indica se o checkbox é pai de um grupo de checkboxes. * @default false */ "isFather"?: 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; /** * Disparado depois que o valor do `checked` foi alterado */ "onCheckedChange"?: (event: BrCheckboxCustomEvent) => void; /** * Disparado depois que o valor do `indeterminate` foi alterado. */ "onIndeterminateChange"?: (event: BrCheckboxCustomEvent) => void; /** * Indica a validade do checkbox. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida. */ "state"?: 'valid' | 'invalid'; /** * Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (``). 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; } /** * ## Design System * Para 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). */ 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; } /** * ## Design System * Para 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/collapse?tab=designer). */ interface BrCollapse { /** * Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez no mesmo grupo. * @default null */ "accordionGroup"?: string; /** * Identificador único do componente. Um valor é gerado automaticamente quando não informado. * @default Helpers.generateUniqueId('clp') */ "customId"?: string; /** * Define a posição do ícone no acionador: 'left' ou 'right'. * @default 'right' */ "iconPosition"?: 'left' | 'right'; /** * Classe CSS do ícone exibido quando o conteúdo está visível. * @default 'fa6-solid:chevron-up' */ "iconToHide"?: string; /** * Classe CSS do ícone exibido quando o conteúdo está oculto. * @default 'fa6-solid:chevron-down' */ "iconToShow"?: string; /** * Emitido ao recolher, com o identificador e o grupo de accordion. */ "onBrDidClose"?: (event: BrCollapseCustomEvent<{ id: string; accordionGroup: string }>) => void; /** * Emitido ao expandir, com o identificador e o grupo de accordion. */ "onBrDidOpen"?: (event: BrCollapseCustomEvent<{ id: string; accordionGroup: string }>) => void; /** * Controla se o collapse está aberto. * @default false */ "open"?: boolean; } /** * ## Design System * Para 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/breadcrumb?tab=designer). */ interface BrCrumb { /** * Define se o crumb é a página atual ativa no breadcrumb. * @default false */ "active"?: boolean; /** * Define se o crumb é o item inicial (Home). * @default false */ "home"?: boolean; /** * Rótulo (texto) do crumb. */ "label"?: string; /** * Evento disparado quando as propriedades do crumb mudam. O componente pai (br-breadcrumb) escuta este evento para se atualizar. */ "onBrCrumbPropsChange"?: (event: BrCrumbCustomEvent) => void; /** * Define o alvo do link quando `url` está presente. (ex: _blank, _self). */ "target"?: string; /** * URL ou caminho para o qual o usuário será direcionado ao clicar no crumb. */ "url"?: string; } /** * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/datetime-picker?tab=designer). */ interface BrDatetimePicker { /** * Define se a data atual deve ser selecionada automaticamente ao abrir o datetime-picker. O padrão é false * @default false */ "autoSelectToday"?: boolean; /** * Define se o datetime-picker está desabilitado. * @default false */ "disabled"?: boolean; /** * Define o modo do datetime-picker. Os valores possíveis são: - "date": Permite selecionar apenas a data. - "time": Permite selecionar apenas o horário. - "datetime": Permite selecionar tanto a data quanto o horário. * @default 'datetime' */ "mode"?: DatetimePickerMode; /** * Define o nome do campo do datetime-picker. Este nome será utilizado ao submeter o formulário que contém o datetime-picker. */ "name"?: string; /** * Evento disparado quando a data selecionada é alterada, tanto por interação do usuário quanto por métodos programáticos. * @returns Data selecionada ou null se nenhuma data estiver selecionada */ "onBrDateTimeChange"?: (event: BrDatetimePickerCustomEvent) => void; /** * Define o placeholder do campo de entrada do datetime-picker. */ "placeholder"?: string; /** * Define o valor inicial do datetime-picker. Pode ser uma instância de Date ou null. Se não for fornecido, o valor padrão será null. */ "value"?: Date | null; /** * Define o dia da semana em que a semana começa. Os valores possíveis são: 0 - Domingo 1 - Segunda-feira 2 - Terça-feira 3 - Quarta-feira 4 - Quinta-feira 5 - Sexta-feira 6 - Sábado * @default 0 */ "weekStartsOn"?: WeekDayIndex; } /** * ## Design System * Para 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/divider?tab=designer). */ interface BrDivider { /** * Alinhamento do conteúdo quando há slot interno. */ "align"?: DividerAlign; /** * Faz o divisor ocupar toda a largura do container, compensando paddings laterais. * @default false */ "bleed"?: boolean; /** * Estilo de borda do divisor. * @default 'solid' */ "borderStyle"?: DividerBorderStyle; /** * Cor do divisor. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não definida, usa a cor padrão do tema. * @default '' */ "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; /** * Ativa variante de alto contraste para fundos escuros. * @default false */ "isDarkMode"?: boolean; /** * Margin bottom em pixels; se omitido, aplica padrão interno. * @default null */ "marginBottom"?: number; /** * Margin left em pixels; se omitido, aplica padrão interno. * @default null */ "marginLeft"?: number; /** * Margin right em pixels; se omitido, aplica padrão interno. * @default null */ "marginRight"?: number; /** * Margin top em pixels; se omitido, aplica padrão interno. * @default null */ "marginTop"?: number; /** * Orientação do divisor.Em modo vertical, posicione dentro de um container com `display: flex`. * @default 'horizontal' */ "orientation"?: DividerOrientation; /** * Espessura visual do divisor. * @default 'small' */ "thickness"?: DividerThickness; } /** * ## Design System * Para 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/dropdown?tab=designer). */ interface BrDropdown { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * 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; /** * Evento emitido quando o dropdown é aberto. Este evento é usado para implementar o auto-dismiss de outros dropdowns. */ "onBrDidOpen"?: (event: BrDropdownCustomEvent<{ id: string }>) => void; /** * Evento emitido quando o estado do dropdown muda. */ "onBrDropdownChange"?: (event: BrDropdownCustomEvent<{ isOpen: boolean }>) => void; /** * Define o posicionamento do target (alvo) em relação ao trigger (acionador). * @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 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; } /** * ## Design System * Para 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/footer?tab=designer). */ 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'; } /** * ## Design System * Para 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/footer?tab=designer). */ interface BrFooterCategory { /** * Identificador único do componente; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * Título da categoria exibido no cabeçalho da lista. * @default '' */ "label"?: string; } /** * ## Design System * Para 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/footer?tab=designer). */ 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. */ "href"?: string; } /** * ## Design System * Para 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/footer?tab=designer). */ interface BrFooterLegal { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId"?: string; } /** * ## Design System * Para 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/footer?tab=designer). */ 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; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeader { /** * Texto exibido como título do cabeçalho. * @default null */ "caption"?: string; /** * URL associada ao título do cabeçalho. * @default null */ "captionUrl"?: string; /** * Identificador único do cabeçalho; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * Densidade do cabeçalho: controla espaçamento e proporções. * @default 'medium' */ "density"?: HeaderDensity; /** * Ativa o modo compacto do cabeçalho. * @default false */ "isCompact"?: boolean; /** * Fixa o cabeçalho no topo durante a rolagem. * @default false */ "isSticky"?: boolean; /** * Evento disparado quando o cabeçalho entra ou sai do modo compacto. O evento contém os detalhes do estado compacto e o ID do componente pai. * @event headerCompactChange */ "onHeaderCompactChange"?: (event: BrHeaderCustomEvent<{ parentId: string; isCompact: boolean }>) => void; /** * Evento disparado para indicar qual lista deve encolher primeiro. O evento contém os detalhes do ID do componente pai e o nome da lista. * @event headerWidthChange */ "onHeaderWidthChange"?: (event: BrHeaderCustomEvent<{ id: string; listNames: ('links' | 'functions')[]; shrink: boolean }>) => void; /** * Define qual lista encolhe primeiro quando o espaço é limitado. * @default 'functions' */ "shrinkFirst"?: 'links' | 'functions'; /** * Texto da assinatura exibida ao lado da logo. * @default null */ "signature"?: string; /** * Texto exibido como subtítulo do cabeçalho. * @default null */ "subcaption"?: string; /** * URL associada ao subtítulo do cabeçalho. * @default null */ "subcaptionUrl"?: string; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderFunction { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * URL de destino da funcionalidade. * @default null */ "href"?: string; /** * Nome do ícone exibido. * @default null */ "iconName"?: string; /** * 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. * @default '_self' */ "target"?: '_blank' | '_self' | '_parent' | '_top'; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderLink { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * URL do link. * @default null */ "href"?: string; /** * 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. * @default '_self' */ "target"?: '_blank' | '_self' | '_parent' | '_top'; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderList { /** * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * Título da lista. * @default null */ "listTitle"?: string; /** * Evento disparado quando a lista recebe foco. O evento envia o ID do componente. * @event headerListFocused */ "onHeaderListFocused"?: (event: BrHeaderListCustomEvent<{ id: string }>) => void; /** * Evento disparado para indicar qual lista deve encolher primeiro. O evento envia o ID do componente pai e o nome da lista. * @event headerWidthChange */ "onHeaderListUpdate"?: (event: BrHeaderListCustomEvent<{ id: string; listName: string }>) => void; } /** * ## Design System * Para 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/header?tab=designer). */ interface BrHeaderLogo { /** * Identificador único; gerado automaticamente quando omitido. * @default Helpers.generateUniqueId() */ "customId"?: string; /** * Texto alternativo/descritivo da logo. * @default 'logo' */ "description"?: string; /** * Altura da imagem. * @default null */ "height"?: string; /** * URL de destino quando a logo for clicada. Se fornecido, a logo será envolvida em um link. */ "href"?: string; /** * Alterna para versão compacta quando true. * @default false */ "isCompact"?: boolean; /** * Url da logo padrão. * @default '' */ "src"?: string; /** * Target do link quando href é fornecido. * @default '_self' */ "target"?: '_blank' | '_self' | '_parent' | '_top'; /** * Largura da imagem. * @default null */ "width"?: 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. */ "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. */ "lazy"?: boolean; /** * Define o ângulo de rotação do ícone. */ "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; } /** * ## Design System * Para 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/input?tab=designer). */ interface BrInput { /** * Texto exibido no botão de ação à direita do input. */ "actionLabel"?: string; /** * Define o tabindex do botão de ação. Útil para remover o botão da sequência de tabulação quando o foco é gerenciado externamente (ex.: br-select). */ "actionTabIndex"?: number; /** * Controla o comportamento de preenchimento automático do navegador para o input. */ "autocomplete"?: InputToggle; /** * Controla a correção automática do texto. * @default 'off' */ "autocorrect"?: InputToggle; /** * 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"?: InputDensity; /** * 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; /** * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas). */ "mask"?: 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; /** * Valor atualizado do input */ "onValueChange"?: (event: BrInputCustomEvent) => void; /** * 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 * @remarks O estado é propagado para o slot de feedback, mas também pode ser controlado diretamente pelo conteúdo do slot. */ "state"?: InputState; /** * Define o valor do passo para campos de entrada numéricos. */ "step"?: number; /** * Especifica o tipo de entrada do campo. * @default 'text' */ "type"?: InputType; /** * Valor exibido no input. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa. */ "value"?: string; } /** * ## Design System * Para 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/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; /** * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`