@govbr-ds/webcomponents/dist/types/components.d.ts

Biblioteca de Web Components baseado no GovBR-DS

/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { HorizontalAlign } from "./utils/types";
export { HorizontalAlign } from "./utils/types";
export namespace Components {
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).
     */
    interface BrAvatar {
        /**
          * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO. Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: "Foto de perfil de João Silva".
         */
        "alt": "Imagem do avatar";
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
         */
        "density": 'small' | 'medium' | 'large';
        /**
          * Define se o avatar está desabilitado
         */
        "disabled": false;
        /**
          * Altura do ícone no avatar do tipo icônico
         */
        "iconHeight": string;
        /**
          * Ajuste para a margem de cima do ícone no avatar do tipo icônico
         */
        "iconMarginTop": string;
        /**
          * Largura do ícone no avatar do tipo icônico
         */
        "iconWidth": string;
        /**
          * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica. Se definido como verdadeiro, o avatar será exibido como um ícone.
         */
        "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;
        /**
          * Texto exibido no avatar do tipo 'letra'. Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.
         */
        "text": string;
    }
    interface BrBreadcrumb {
        /**
          * Define o array de objetos que receberá os nomes e links do breadcrumb. Define valor padrão do breadcrumb 'defaultCrumbs'.
         */
        "crumbs": string | BreadcrumbItem[];
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * URL para home. Caso não seja fornecido, o valor padrão será /.
         */
        "homeUrl": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](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. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
         */
        "density": 'large' | 'medium' | 'small';
        /**
          * Desativa o botão, tornando-o não interativo.
         */
        "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.
         */
        "isActive": boolean;
        /**
          * Aplica o estado de "progresso" ao botão. O botão exibirá um indicador de carregamento ou progresso.
         */
        "isLoading": boolean;
        /**
          * Define o formato do botão. Valores possíveis: - 'circle': Botão com formato circular. - 'block': Botão com formato ovalado ocupando toda a largura disponível. - 'pill': Botão com formato ovalado, com bordas arredondadas.
         */
        "shape": 'circle' | 'block' | 'pill';
        /**
          * Define o tipo de botão, especificando seu comportamento padrão. Valores possíveis: - 'button': Um botão padrão. - 'reset': Um botão para redefinir o formulário. - 'submit': Um botão para enviar o formulário.
         */
        "type": 'button' | 'reset' | 'submit';
        /**
          * Define o valor inicial do botão em um formulário.
         */
        "value": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](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.
         */
        "checked": boolean;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Desativa o checkbox, tornando-o não interativo.
         */
        "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.
         */
        "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.
         */
        "indeterminate": boolean;
        /**
          * Texto descritivo exibido à direita do checkbox. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.
         */
        "label": string;
        /**
          * Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.
         */
        "name": string;
        /**
          * Define o estado indeterminado do checkbox.
          * @param value Novo valor para o estado indeterminado.
         */
        "setIndeterminate": (value: boolean) => Promise<void>;
        /**
          * Indica a validade do checkbox. Valores possíveis: 'valid': O checkbox é considerado válido. 'invalid': O checkbox é considerado inválido. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.
         */
        "state": 'valid' | 'invalid';
        /**
          * Inverte o valor da prop `checked`
         */
        "toggleChecked": () => Promise<void>;
        /**
          * Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o checkbox está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o checkbox está selecionado; para verificar o estado de seleção, use a propriedade `checked`.
         */
        "value": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/utilitarios/js/checkgroup?tab=desenvolvedor).
     */
    interface BrCheckgroup {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "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.
         */
        "indeterminate": boolean;
        /**
          * Texto descritivo do grupo.
         */
        "label": string;
        /**
          * Define o texto do label quando o checkbox está desmarcado.
         */
        "labelDesselecionado": string;
        /**
          * Define o texto do label quando o checkbox está marcado.
         */
        "labelSelecionado": string;
    }
    /**
     * O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.
     * - Collapse simples: Cada instância funciona de forma independente, permitindo abrir ou fechar o conteúdo conforme necessário, sem impactar outros componentes na página.
     * - Accordion: Quando configurado com a propriedade `accordionGroup`, múltiplos componentes `br-collapse` são agrupados. Nesse caso, apenas um item pode estar expandido por vez. Ao abrir um novo item, o anteriormente expandido será automaticamente fechado.
     */
    interface BrCollapse {
        /**
          * Define se o collapse faz parte de um accordion
          * @default null
         */
        "accordionGroup"?: string;
        /**
          * Método público para fechar. Este método pode ser chamado externamente para fechar o componente.
         */
        "closeCollapse": () => Promise<void>;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Define a posição do ícone: 'left' ou 'right'
          * @default 'right'
         */
        "iconPosition": 'left' | 'right';
        /**
          * Classe CSS para o ícone de recolhimento
          * @default 'fa6-solid:chevron-up'
         */
        "iconToHide": string;
        /**
          * Classe CSS para o ícone de expansão
          * @default 'fa6-solid:chevron-down'
         */
        "iconToShow": string;
        /**
          * Define se o collapse está aberto ou fechado.
          * @default false
         */
        "open": boolean;
        /**
          * Método público para abrir. Este método pode ser chamado externamente para abrir o componente.
         */
        "openCollapse": () => Promise<void>;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/divider?tab=designer).
     */
    interface BrDivider {
        /**
          * Alinhamento do texto do divider
         */
        "align": 'left' | 'center' | 'right';
        /**
          * Define se o divider deve ocupar toda a largura do container pai
         */
        "bleed": boolean;
        /**
          * Modifica o estilo da linha
         */
        "borderStyle": 'dashed' | 'solid';
        /**
          * Define a cor da linha
         */
        "color": string;
        /**
          * Identificador único
         */
        "customId": string;
        /**
          * Ativa o modo escuro
         */
        "isDarkMode": boolean;
        /**
          * Define a orientação
         */
        "orientation": 'horizontal' | 'vertical';
        /**
          * Modifica a espessura da linha
         */
        "thickness": 'small' | 'medium' | 'large';
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/dropdown?tab=designer).
     */
    interface BrDropdown {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Esconde o dropdown. Define a propriedade `isOpen` como falsa e retorna o novo estado. Este método é marcado com
          * @Method () para que possa 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).
         */
        "isOpen": boolean;
        /**
          * Abre o dropdown. Define a propriedade `isOpen` como verdadeira e retorna o novo estado. Este método é marcado com
          * @Method () para que possa ser chamado externamente.
         */
        "open": () => Promise<{ isOpen: boolean; }>;
        /**
          * Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
         */
        "setFocus": () => Promise<void>;
    }
    /**
     * O componente `br-footer` representa o rodapé do site, de acordo com a documentação de design do GovBR.
     * Ele é composto por vários subcomponentes, como [`br-footer-category`](/docs/components/footer-category), [`br-footer-item`](/docs/components/footer-item), [`br-footer-social`](/docs/components/footer-social), [`br-footer-legal`](/docs/components/footer-legal) e [`br-logo`](/docs/components/footer-logo).
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/footer?tab=designer).
     */
    interface BrFooter {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Texto de descrição das redes sociais.
         */
        "socialNetworkTitle": string;
        /**
          * Indica o tema do rodapé.
         */
        "theme": 'dark' | 'light';
    }
    /**
     * O subcomponente `br-footer-category` representa o mapa do site, de acordo com a documentação de design do GovBR.
     * O `br-footer-category` deve ser utilizado com filho direto do componente [`br-footer`](/docs/components/footer) e possui um slot para os itens da categoria.
     * Esses itens são representados pelo componente [`br-footer-item`](/docs/components/footer-item).
     * O componente `br-footer-category` é responsivo e se adapta a diferentes tamanhos de tela.
     * Em telas menores, ele se comporta como um accordion, enquanto em telas maiores, ele é exibido como uma lista.
     */
    interface BrFooterCategory {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Título da lista.
          * @default ''
         */
        "label": string;
    }
    /**
     * O subcomponente `br-footer-item` deve ser utilizado juntamente com o subcomponente [`br-footer-category`](/docs/components/footer-category) para representar os itens dentro de uma categoria no rodapé.
     * De acordo com o a documentação de design do GovBR, esses dois subcomponentes formam o mapa do site.
     * Portanto sob esse contexto, o `br-footer-item` representa uma página no site.
     * O `br-footer-item` deve ser utilizado como filho direto do componente [`br-footer-category`](/docs/components/footer-category).
     */
    interface BrFooterItem {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.
          * @example 'https://www.gov.br'
          * @example '/home'
          * @example '#section'
         */
        "href"?: string;
    }
    /**
     * O subcomponente `br-footer-legal` representa a área destinada a informações legais no rodapé do site, de acordo com a documentação de design do GovBR.
     * Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
     */
    interface BrFooterLegal {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
    }
    /**
     * O subcomponente `br-footer-logo` representa a logo principal do site ou a logo dos parceiros.
     * Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
     * Para que ele represente a logo principal do site, o atributo `is-partner` deve ser definido como `false`, ou não deve ser definido.
     * Para que ele represente a logo de um parceiro, o atributo `is-partner` deve ser definido como `true`.
     */
    interface BrFooterLogo {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Descrição da logo.
         */
        "description": string;
        /**
          * Define se a logo é de um parceiro.
         */
        "isPartner": boolean;
        /**
          * Posição da logo.
         */
        "position": 'left' | 'center' | 'right';
        /**
          * Url da logo padrão.
         */
        "src": string;
    }
    /**
     * 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.
         */
        "customId": string;
        /**
          * Descrição do ícone da rede social
         */
        "description": string;
        /**
          * URL da rede social
         */
        "href": string;
        /**
          * Ícone da rede social
         */
        "icon": string;
    }
    /**
     * O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.
     * Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.
     * Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone
     * deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para
     * integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário
     * e a clareza das interfaces.
     * Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).
     */
    interface BrIcon {
        /**
          * Permite adicionar classes CSS adicionais ao ícone. Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.
         */
        "cssClasses"?: string;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Define o tipo de espelhamento do ícone. Aceita valores como "horizontal" para espelhar o ícone horizontalmente, "vertical" para espelhar verticalmente, ou ambos.
         */
        "flip"?: 'horizontal' | 'vertical';
        /**
          * Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. O valor padrão é '16'.
         */
        "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`.
         */
        "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`.
         */
        "isInline"?: boolean;
        /**
          * Define o ângulo de rotação do ícone. Aceita valores como "90deg", "180deg" e "270deg" para rotacionar o ícone em diferentes ângulos.
         */
        "rotate"?: '90deg' | '180deg' | '270deg';
        /**
          * Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. O valor padrão é '24'.
         */
        "width": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).
     */
    interface BrInput {
        /**
          * Texto exibido no botão de ação à direita do input.
         */
        "actionLabel": string;
        /**
          * Controla o comportamento de preenchimento automático do navegador para o input.
         */
        "autocomplete": 'on' | 'off';
        /**
          * Controla a correção automática do texto.
         */
        "autocorrect": 'off' | 'on';
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
         */
        "density": 'large' | 'medium' | 'small';
        /**
          * Desativa o input, tornando-o não interativo.
         */
        "disabled": boolean;
        /**
          * Texto adicional que fornece ajuda ou informações sobre o input.
         */
        "helpText": string;
        /**
          * Se verdadeiro, o input terá destaque visual.
         */
        "isHighlight": boolean;
        /**
          * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).
         */
        "isInline": boolean;
        /**
          * Texto exibido como rótulo do input.
         */
        "label": string;
        /**
          * Define o valor máximo para campos de entrada numéricos.
         */
        "max": number;
        /**
          * Define o comprimento máximo do valor do campo de entrada.
         */
        "maxlength": number;
        /**
          * Define o valor mínimo para campos de entrada numéricos.
         */
        "min": number;
        /**
          * Define o comprimento mínimo do valor do campo de entrada.
         */
        "minlength": number;
        /**
          * Se verdadeiro, permite a seleção de múltiplos arquivos.
         */
        "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.
         */
        "readonly": boolean;
        /**
          * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.
         */
        "required": boolean;
        /**
          * Define o estado do input Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.
         */
        "state": 'info' | 'warning' | 'danger' | 'success';
        /**
          * Define o valor do passo para campos de entrada numéricos.
         */
        "step": number;
        /**
          * Especifica o tipo de entrada do campo. Pode ser um dos seguintes: - 'color': Seletor de cor - 'email': Campo para e-mail - 'hidden': Campo oculto - 'password': Campo para senha - 'range': Controle deslizante - 'search': Campo de pesquisa - 'number': Campo para números - 'tel': Campo para números de telefone - 'text': Campo de texto padrão - 'url': Campo para URLs
         */
        "type": | 'color'
    | 'email'
    | 'hidden'
    | 'password'
    | 'range'
    | 'search'
    | 'number'
    | 'tel'
    | 'text'
    | 'file'
    | 'url';
        /**
          * Valor exibido no input. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.
         */
        "value": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).
     */
    interface BrItem {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
         */
        "density": 'large' | 'medium' | 'small';
        /**
          * Desativa o item, tornando-o não interativo.
         */
        "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.
         */
        "isActive": boolean;
        /**
          * Quando definido como `true`, o item será tratado como um botão.
         */
        "isButton": boolean;
        /**
          * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.
         */
        "isInteractive": boolean;
        /**
          * Indica se o item está no estado selecionado. Se definido como verdadeiro, o item será exibido como selecionado.
         */
        "isSelected": boolean;
        /**
          * Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
         */
        "setFocus": () => Promise<void>;
        /**
          * Define o alvo do link quando `href` está presente. Pode ser: - `_blank` para abrir em uma nova aba, - `_self` para abrir na mesma aba, - `_parent` para abrir na aba pai, - `_top` para abrir na aba superior.
         */
        "target"?: '_blank' | '_self' | '_parent' | '_top';
        /**
          * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser: - `'submit'` para enviar um formulário, - `'reset'` para redefinir um formulário, - `'button'` para um botão padrão.
         */
        "type": 'submit' | 'reset' | 'button';
        /**
          * Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.
         */
        "value"?: string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/list?tab=designer).
     */
    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.
         */
        "accordion": string;
        /**
          * Indica se a lista possui o comportamento de collapse.
         */
        "collapse": boolean;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Define o cabeçalho para a lista.
         */
        "header": string;
        /**
          * Indica que o divider para o título da lista estará oculto.
         */
        "hideHeaderDivider": boolean;
        /**
          * Indica se a lista será horizontal. Por padrão, a lista é vertical.
         */
        "isHorizontal": boolean;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/loading?tab=designer).
     */
    interface BrLoading {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.
         */
        "isMedium": boolean;
        /**
          * Determina o tipo de indicador a ser exibido: - Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso. - Se falso, exibirá um indicador de carregamento indeterminado.
         */
        "isProgress": boolean;
        /**
          * Texto a ser exibido abaixo do indicador de carregamento. Pode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.
         */
        "label": string;
        /**
          * Define a porcentagem de progresso a ser exibida na barra de progresso. Deve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.
         */
        "progressPercent": number;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).
     */
    interface BrMessage {
        /**
          * Controla o comportamento do fechamento do componente quando `isClosable` é verdadeiro. - Se definido como `true`, o componente será automaticamente removido do DOM ao clicar no botão de fechar. - Se definido como `false`, o componente permanecerá no DOM e apenas emitirá o evento `brDidClose`.  Esta propriedade não tem efeito se `isClosable` for `false`. O valor padrão é `false`.
         */
        "autoRemove": boolean;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "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.
         */
        "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.
         */
        "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.
         */
        "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.
         */
        "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'.
         */
        "state": 'info' | 'warning' | 'danger' | 'success';
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](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.
         */
        "checked": boolean;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Desativa o radio, tornando-o não interativo.
         */
        "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.
         */
        "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;
        /**
          * Indica a validade do radio. Valores possíveis: - 'valid': O radio é considerado válido. - 'invalid': O radio é considerado inválido. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.
         */
        "state": 'valid' | 'invalid';
        /**
          * Inverte o valor da prop `checked`
         */
        "toggleChecked": () => Promise<void>;
        /**
          * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`). 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;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/scrim?tab=designer).
     */
    interface BrScrim {
        /**
          * Define o seletor para o elemento activator. Pode ser: - Um seletor CSS (ex: '.button-class', '#button-id') - A string 'parent' para usar o elemento pai como activator Nota: O slot 'activator' tem prioridade sobre esta propriedade.
         */
        "activator": string | null;
        /**
          * Método público para esconder o scrim
         */
        "close": () => Promise<void>;
        /**
          * Define um valor CSS personalizado para o background do scrim
         */
        "customBackground": string | null;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Define a opacidade personalizada do scrim
         */
        "customOpacity": number | null;
        /**
          * Desativa o fechamento do scrim ao ser clicado
         */
        "disableCloseOnClick": boolean;
        /**
          * Define o modo de exibição do scrim: - 'fullscreen': Ocupa toda a tela (position: fixed). - 'parent': Ocupa apenas o elemento pai (position: absolute). O elemento pai deve ter `position: relative` ou outro valor de posicionamento diferente de `static`.
         */
        "displayMode": 'fullscreen' | 'parent';
        /**
          * Ativa/desativa o scrim
         */
        "isOpen": boolean;
        /**
          * Método público para exibir o scrim
         */
        "open": () => Promise<void>;
        /**
          * 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.
         */
        "scrollThreshold": number;
        /**
          * Define o limite de rolagem para o fechamento automático do scrim.
         */
        "setScrollThreshold": (threshold: number) => Promise<void>;
        /**
          * Método público para alternar o estado de exibição do scrim
         */
        "toggle": () => Promise<void>;
        /**
          * Define o valor de z-index do scrim
         */
        "zIndex": number | null;
    }
    interface BrSelect {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Habilita o modo múltiplo para selecionar várias opções.
         */
        "isMultiple": boolean;
        /**
          * Indica se a listagem de itens do select está expandida
         */
        "isOpen": 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. Pode ser fornecida como: - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{"label": "Opção 1", "value": "1"}]'. - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:   - `label`: O texto exibido para o usuário (obrigatório).   - `value`: O valor associado à opção (obrigatório).   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`). 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" }] ```
         */
        "options": | string
    | {
        label: string
        value: string
        selected?: boolean
      }[];
        /**
          * Texto auxiliar exibido antes de uma seleção.
         */
        "placeholder": string;
        /**
          * Rótulo para selecionar todas as opções.
         */
        "selectAllLabel": string;
        /**
          * Exibe o ícone de busca no campo de entrada.
         */
        "showSearchIcon": boolean;
        /**
          * Inverte o valor da prop `isOpen`
         */
        "toggleOpen": () => Promise<void>;
        /**
          * Rótulo para desmarcar todas as opções.
         */
        "unselectAllLabel": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](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<void>;
        /**
          * 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<number>;
        /**
          * 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<void>;
        /**
          * 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<void>;
        /**
          * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem
         */
        "contentType": 'default' | 'br-icon' | 'no-content' | 'slotted';
        /**
          * define o passo que começará destacado
         */
        "initialStep": string;
        /**
          * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem
         */
        "labelPosition"?: 'top' | 'right' | 'bottom' | 'left';
        /**
          * propriedade responsável por definir a orientação do componente Step
         */
        "layout": 'horizontal' | 'vertical';
        /**
          * Propriedade que define o tipo de comportamento que o componente Step deverá seguir
         */
        "mode": 'controller' | 'step';
        /**
          * Propriedade que define o tipo de progressão de etapas que o step vai executar
         */
        "progressionType": 'linear' | 'nonlinear';
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
     */
    interface BrStepItem {
        /**
          * Propriedade que define se o item Step está com estado ativo.
         */
        "active": boolean;
        /**
          * Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
         */
        "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.
         */
        "brIconName"?: string;
        /**
          * Propriedade que define se o item Step está com estado desativado..
         */
        "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<void>;
        /**
          * 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.
         */
        "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<void>;
        /**
          * 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<void>;
        /**
          * 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<void>;
        /**
          * 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<void>;
        /**
          * 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<void>;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](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.
         */
        "checked": boolean;
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "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.
         */
        "density": 'large' | 'medium' | 'small';
        /**
          * Desativa o switch, tornando-o não interativo.
         */
        "disabled": boolean;
        /**
          * Adiciona um ícone ao switch para indicar a mudança de estado.
         */
        "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.
         */
        "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<void>;
        /**
          * Define o valor associado ao switch quando ele faz parte de um formulário nativo (`<form>`). 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;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tab-item?tab=designer).
     */
    interface BrTab {
        /**
          * Define se o Tab usará um esquema de cores. Apenas o esquema 'dark' está disponível para o modo escuro.
          * @type {string}
         */
        "colorMode": string;
        /**
          * A propriedade 'density' define a densidade do componente. Os valores possíveis são 'small', 'medium' e 'large'.
          * @type {string}
          * @default 'medium'
         */
        "density": 'small' | 'medium' | 'large';
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tab-item?tab=designer).
     */
    interface BrTabItem {
        "TabItemId": string;
        /**
          * Define se o Tab usará um esquema de cores. Apenas o esquema 'dark' está disponível para o modo escuro.
          * @type {string}
         */
        "colorMode": string;
        /**
          * Define contador do item de tab
          * @type {string}
         */
        "counter": string;
        /**
          * Define ícone do item de tab
          * @type {string}
         */
        "icon": string;
        /**
          * Define se o item de tab é ativo
          * @type {boolean}
         */
        "isActive": boolean;
        /**
          * Define se mostra somente o ícone
          * @type {boolean}
          * @default false
         */
        "onlyIcon": boolean;
        /**
          * Define o título do item de tab
          * @type {string}
         */
        "tabItemTitle": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/table?tab=designer).
     */
    interface BrTable {
        /**
          * Identificador único aplicado na tag raiz do shadowRoot. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/table?tab=designer).
     */
    interface BrTableCell {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Define se a célula do cabeçalho possui borda vertical.
         */
        "hasVerticalBorder": boolean;
        /**
          * Define o alinhamento horizontal do conteúdo da célula.
         */
        "horizontalAlign": HorizontalAlign;
    }
    /**
     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/table?tab=designer).
     */
    interface BrTableHeaderCell {
        /**
          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
         */
        "customId": string;
        /**
          * Define se a célula do cabeçalho possui borda vertical.
         */
        "hasVerticalBorder": boolean;
        /**
          * Define o alinhamento horizontal do conteúdo da célula. Esse alinhamento é propagado para as demais células da coluna.
         */
        "horizontalAlign": HorizontalAlign;
    }
    /**
     * Para uma descrição det