@govbr-ds/webcomponents

{ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json", "version": 1.1, "tags": [ { "name": "br-avatar", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n\n## Examples\n---\n\n\n### **Methods:**\n - **handleDensityChange(newValue: _'small' | 'medium' | 'large'_)** - Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\nGarante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.", "attributes": [ { "name": "density", "description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.", "values": [ { "name": "small" }, { "name": "medium" }, { "name": "large" } ] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "src", "description": "URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\nDeve ser uma URL válida que aponta para a imagem desejada.", "values": [] }, { "name": "alt", "description": "Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\nDeve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".", "values": [] }, { "name": "is-iconic", "description": "Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\nÚtil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.", "values": [] }, { "name": "text", "description": "Conteúdo textual do avatar.\nApenas o primeiro caractere será exibido em maiúscula.", "values": [] }, { "name": "disabled", "description": "Define se o avatar está desabilitado", "values": [] }, { "name": "text-background-color", "description": "Cor de fundo personalizada para o avatar do tipo texto", "values": [] } ], "references": [] }, { "name": "br-breadcrumb", "description": "\n---\n", "attributes": [ { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "home-url", "description": "URL para home.\nCaso não seja fornecido, o valor padrão será /.", "values": [] }, { "name": "crumbs", "description": "Define o array de objetos que receberá os nomes e links do breadcrumb.\nDefine valor padrão do breadcrumb 'defaultCrumbs'.", "values": [{ "name": "BreadcrumbItem[]" }] } ], "references": [] }, { "name": "br-button", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).\n\n## Examples\n---\n\n\n### **Slots:**\n - **default** - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.\n\n### **CSS Parts:**\n - **button** - Elemento button interno. Use para aplicar estilos customizados através de ::part(button).", "attributes": [ { "name": "color-mode", "description": "Define se o botão usará um esquema de cores escuro.", "values": [{ "name": "dark" }] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "density", "description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "disabled", "description": "Desativa o botão, tornando-o não interativo.", "values": [] }, { "name": "emphasis", "description": "Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.", "values": [ { "name": "primary" }, { "name": "secondary" }, { "name": "tertiary" } ] }, { "name": "is-active", "description": "Indica se o botão está no estado ativo.\nSe definido como verdadeiro, o botão será exibido como ativo.", "values": [] }, { "name": "is-loading", "description": "Aplica o estado de \"progresso\" ao botão.\nO botão exibirá um indicador de carregamento ou progresso.", "values": [] }, { "name": "shape", "description": "Define o formato do botão.\nValores possíveis:\n- 'circle': Botão com formato circular.\n- 'block': Botão com formato ovalado ocupando toda a largura disponível.\n- 'pill': Botão com formato ovalado, com bordas arredondadas.", "values": [ { "name": "circle" }, { "name": "block" }, { "name": "pill" } ] }, { "name": "type", "description": "Define o tipo de botão, especificando seu comportamento padrão.\nValores possíveis:\n- 'button': Um botão padrão.\n- 'reset': Um botão para redefinir o formulário.\n- 'submit': Um botão para enviar o formulário.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] }, { "name": "value", "description": "Define o valor inicial do botão em um formulário.", "values": [] }, { "name": "aria-label", "description": "Define o rótulo acessível do botão.\nEste rótulo é usado por tecnologias assistivas para descrever a função do botão.\nÉ especialmente importante para botões com formato circular, onde o texto pode não ser visível.\nSe o botão não tiver um rótulo acessível, uma mensagem de aviso será exibida no console.", "values": [] }, { "name": "aria-pressed", "description": "Define o estado de pressionado do botão.\nEste atributo é usado para indicar se o botão está atualmente pressionado ou não.\nÉ especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado.\nO valor deve ser 'true' ou 'false'.", "values": [] } ], "references": [] }, { "name": "br-card", "description": "O componente Card é um container versátil para apresentação de conteúdo estruturado.\nSuporta cabeçalho, conteúdo principal e rodapé, além de diferentes estilos visuais.\nPara uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/card?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Conteúdo principal do card quando não usar slots estruturados\n- **header** - Conteúdo do cabeçalho do card\n- **content** - Conteúdo principal do card (quando usar estrutura com slots)\n- **footer** - Conteúdo do rodapé do card", "attributes": [ { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "disabled", "description": "Define se o card está desabilitado.\nQuando true, o card fica com opacidade reduzida e não responde a interações.", "values": [] }, { "name": "hover", "description": "Define se o card tem hover interativo.\nQuando true, o card terá efeitos visuais ao passar o mouse.", "values": [] } ], "references": [] }, { "name": "br-checkbox", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/checkbox?tab=designer).\n\n## Examples\n---\n\n\n### **Events:**\n - **checkedChange** - Disparado depois que o valor do `checked` foi alterado\n- **indeterminateChange** - Disparado depois que o valor do `indeterminate` foi alterado.\n\n### **Methods:**\n - **setIndeterminate(value: _boolean_)** - Define o estado indeterminado do checkbox.\n- **toggleChecked()** - Inverte o valor da prop `checked`\n\n### **Slots:**\n - **default** - O texto descritivo pode ser passado por propriedade (label) ou por slot.", "attributes": [ { "name": "indeterminate", "description": "Define o estado intermediário do checkbox.\nQuando verdadeiro, exibe uma marcação parcial visual que indica seleção parcial.\nÚtil para representar grupos onde alguns itens estão selecionados, mas não todos.\nAo clicar no checkbox neste estado, ele será automaticamente alterado para marcado.", "values": [] }, { "name": "checked", "description": "Define o estado de seleção do checkbox.\nSe definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "disabled", "description": "Desativa o checkbox, tornando-o não interativo.", "values": [] }, { "name": "has-hidden-label", "description": "Define se o label associado ao checkbox deve ser oculto.\nSe definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.", "values": [] }, { "name": "label", "description": "Texto descritivo exibido à direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.", "values": [] }, { "name": "name", "description": "Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo.\nO valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.", "values": [] }, { "name": "state", "description": "Indica a validade do checkbox.\nValores possíveis:\n'valid': O checkbox é considerado válido.\n'invalid': O checkbox é considerado inválido.\nSe não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.", "values": [{ "name": "valid" }, { "name": "invalid" }] }, { "name": "value", "description": "Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`).\nEsse valor é enviado com o formulário quando o checkbox está selecionado.\n**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`.", "values": [] } ], "references": [] }, { "name": "br-checkgroup", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/utilitarios/js/checkgroup?tab=desenvolvedor).\n\n## Examples\n---\n\n\n### **Slots:**\n - **default** - Slot para adicionar os checkboxes que serão controlados pelo checkgroup.", "attributes": [ { "name": "label", "description": "Texto descritivo do grupo.", "values": [] }, { "name": "label-selecionado", "description": "Define o texto do label quando o checkbox está marcado.", "values": [] }, { "name": "label-desselecionado", "description": "Define o texto do label quando o checkbox está desmarcado.", "values": [] }, { "name": "indeterminate", "description": "Define o estado intermediário do checkbox.\nSe definido como verdadeiro, o checkbox exibirá um estado intermediário, que é um estado visual que indica que a opção está parcialmente selecionada.\nEste estado é útil quando o checkbox faz parte de um grupo com seleção parcial.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] } ], "references": [] }, { "name": "br-collapse", "description": "O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.\n\n- 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.\n- 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.\n\n## Examples\n---\n\n\n### **Events:**\n - **brDidOpen** - Evento emitido ao expandir.\n- **brDidClose** - Evento emitido ao recolher.\n\n### **Methods:**\n - **handleOpen(event: _CustomEvent_)** - Evento disparado quando o componente é aberto.\n- **openCollapse()** - Método público para abrir.\nEste método pode ser chamado externamente para abrir o componente.\n- **closeCollapse()** - Método público para fechar.\nEste método pode ser chamado externamente para fechar o componente.\n- **render(): __** - Renderiza o componente.\nO componente é renderizado como um elemento <details> com um <summary> que contém o acionador.\n\n### **Slots:**\n - **default** - O conteúdo expansível mostrado/ocultado dinamicamente.\n- **trigger** - Permite personalizar o conteúdo do acionador (texto, imagens, etc.).", "attributes": [ { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "open", "description": "Define se o collapse está aberto ou fechado.", "values": [] }, { "name": "accordion-group", "description": "Define se o collapse faz parte de um accordion", "values": [] }, { "name": "icon-to-show", "description": "Classe CSS para o ícone de expansão", "values": [] }, { "name": "icon-to-hide", "description": "Classe CSS para o ícone de recolhimento", "values": [] }, { "name": "icon-position", "description": "Define a posição do ícone: 'left' ou 'right'", "values": [{ "name": "left" }, { "name": "right" }] } ], "references": [] }, { "name": "br-divider", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/divider?tab=designer).\n---\n\n\n### **Methods:**\n - **updateColor()** - Watcher para a cor do divisor.\nAtualiza a propriedade CSS '--border-color' do elemento para refletir a cor definida.\nIsso permite que o divisor use cores personalizadas sem precisar de estilos adicionais.\n- **updateMargins()** - Watcher para as propriedades de margin.\nAtualiza as propriedades CSS customizáveis do elemento para refletir os margins definidos.\n- **render(): __** - Renderiza o divisor.\n\n### **Slots:**\n - **default** - Conteúdo opcional que pode ser exibido dentro do divisor, como texto, ícones ou outros elementos personalizados.", "attributes": [ { "name": "custom-id", "description": "ID personalizado para o elemento, útil para acessibilidade e identificação única.\nSe não for fornecido, um ID único será gerado automaticamente.", "values": [] }, { "name": "orientation", "description": "Define a orientação do divisor.\nPode ser 'horizontal' ou 'vertical'.\nCaso seja usado como vertical, o divider deve ser colocado dentro de um container com altura definida.", "values": [{ "name": "DividerOrientation" }] }, { "name": "thickness", "description": "Define a espessura do divisor.\nPode ser 'small', 'medium' ou 'large'.", "values": [{ "name": "DividerThickness" }] }, { "name": "border-style", "description": "Define o estilo da borda do divisor.\nPode ser 'dashed' ou 'solid'.", "values": [{ "name": "DividerBorderStyle" }] }, { "name": "is-dark-mode", "description": "Define se o divisor deve ser exibido no modo escuro.", "values": [] }, { "name": "color", "description": "Cor do divisor.\nPode ser uma cor hexadecimal, RGB ou nome de cor CSS.\nSe não for especificada, o divisor usará a cor padrão definida pelo tema.", "values": [] }, { "name": "align", "description": "Alinhamento do conteúdo do divisor.\nPode ser 'start', 'center' ou 'end'.", "values": [{ "name": "DividerAlign" }] }, { "name": "bleed", "description": "Define se o divisor deve \"sangrar\" (bleed) nas laterais, ou seja, se deve ocupar toda a largura do container pai.\nIsso é útil quando o divisor precisa se estender além do padding do container pai.", "values": [] }, { "name": "margin-top", "description": "Define o margin top do divisor em pixels.\nSe não for especificado, usa o valor padrão de 20px para horizontal e 0px para vertical.", "values": [] }, { "name": "margin-bottom", "description": "Define o margin bottom do divisor em pixels.\nSe não for especificado, usa o valor padrão de 20px para horizontal e 0px para vertical.", "values": [] }, { "name": "margin-left", "description": "Define o margin left do divisor em pixels.\nSe não for especificado, usa o valor padrão de 0px para horizontal e 10px para vertical.", "values": [] }, { "name": "margin-right", "description": "Define o margin right do divisor em pixels.\nSe não for especificado, usa o valor padrão de 0px para horizontal e 10px para vertical.", "values": [] } ], "references": [] }, { "name": "br-dropdown", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/dropdown?tab=designer).\n---\n\n\n### **Events:**\n - **brDropdownChange** - Evento emitido quando o estado do dropdown muda.\n- **brDidOpen** - Evento emitido quando o dropdown é aberto.\nEste evento é usado para implementar o auto-dismiss de outros dropdowns.\n\n### **Methods:**\n - **isOpenChanged(newValue: _boolean_)** - Método chamado sempre que a propriedade `isOpen` muda.\nEmite um evento com o novo estado do dropdown.\n- **targetZIndexChanged()** - Aplica o novo valor de z-index ao elemento target.\n- **open(): _Promise<{ isOpen: boolean }>_** - Abre o dropdown.\nDefine a propriedade `isOpen` como verdadeira e retorna o novo estado.\n Este método pode ser chamado externamente.\n- **hide(): _Promise<{ isOpen: boolean }>_** - Esconde o dropdown.\nDefine a propriedade `isOpen` como falsa e retorna o novo estado.\nEste método pode ser chamado externamente.\n- **setFocus()** - Define o foco no elemento interno do componente.\nEste método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.\n\n### **Slots:**\n - **trigger** - Slot que recebe o elemento acionador\n- **target** - Slot que recebe o elemento alvo", "attributes": [ { "name": "is-open", "description": "Indica se o dropdown está aberto ou fechado.\nEsta propriedade é refletida no DOM e pode ser alterada externamente.\nO valor padrão é falso (fechado).", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "placement", "description": "Define o posicionamento do target (alvo) em relação ao trigger (acionador).\nValores possíveis: 'bottom-start' (padrão), 'bottom-end', 'top-start', 'top-end', 'left', 'right', 'bottom', 'top'.", "values": [ { "name": "" }, { "name": "bottom-start" }, { "name": "bottom-end" }, { "name": "top-start" }, { "name": "top-end" }, { "name": "left" }, { "name": "right" }, { "name": "bottom" }, { "name": "top" } ] }, { "name": "prevent-auto-dismiss", "description": "Define se o dropdown deve permanecer aberto quando outro dropdown é aberto.\nQuando definido como false (padrão), o dropdown será fechado automaticamente quando outro dropdown for aberto.\nQuando definido como true, o dropdown permanecerá aberto mesmo quando outro dropdown for aberto.", "values": [] }, { "name": "target-z-index", "description": "Define o z-index do elemento target (alvo) do dropdown.\nPermite customizar a ordem de sobreposição do painel dropdown em relação aos demais elementos da página.\nO valor padrão utiliza a variável CSS do design system: var(--z-index-layer-1).", "values": [] } ], "references": [] }, { "name": "br-footer", "description": "O componente `br-footer` representa o rodapé do site, de acordo com a documentação de design do GovBR.\nEle é 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).\nPara uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/footer?tab=designer).\n\n## Examples\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **logo** - Área destinada ao logo do rodapé. Utilize o componente `br-logo` para adicionar o logo.\n- **default** - Área destinada ao mapa do site. Utilize o componente `br-footer-category` juntamente com o componente `br-footer-item` para adicionar itens.\n- **social-network** - Área destinada às redes sociais. Utilize o componente `br-footer-social` para adicionar redes sociais.\n- **partner-logo** - Área destinada aos logos de parceiros. Utilize o componente `br-logo` para adicionar os logos.\n- **legal** - Área destinada às informações legais. Utilize o componente `br-footer-legal` para adicionar informações legais.", "attributes": [ { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "theme", "description": "Indica o tema do rodapé.", "values": [{ "name": "dark" }, { "name": "light" }] }, { "name": "social-network-title", "description": "Texto de descrição das redes sociais.", "values": [] } ], "references": [] }, { "name": "br-icon", "description": "O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.\nUtilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.\n\nCom opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone\ndeve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para\nintegrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário\ne a clareza das interfaces.\n\nPara mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).\n---\n", "attributes": [ { "name": "icon-name", "description": "Nome do ícone a ser exibido, utilizando a biblioteca Iconify.\nEste nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.", "values": [] }, { "name": "height", "description": "Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\nO valor padrão é '16'.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "width", "description": "Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\nO valor padrão é '24'.", "values": [] }, { "name": "css-classes", "description": "Permite adicionar classes CSS adicionais ao ícone.\nUse esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.", "values": [] }, { "name": "is-inline", "description": "Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor.\nÚtil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\nO valor padrão é `false`.", "values": [] }, { "name": "rotate", "description": "Define o ângulo de rotação do ícone.\nAceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o ícone em diferentes ângulos.", "values": [ { "name": "90deg" }, { "name": "180deg" }, { "name": "270deg" } ] }, { "name": "flip", "description": "Define o tipo de espelhamento do ícone.\nAceita valores como \"horizontal\" para espelhar o ícone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos.", "values": [{ "name": "horizontal" }, { "name": "vertical" }] }, { "name": "is-focusable", "description": "Determina se o ícone pode receber foco.\nSe definido como verdadeiro, o ícone pode ser navegado usando Tab.\nO valor padrão é `false`.", "values": [] }, { "name": "lazy", "description": "Controla o comportamento de carregamento do ícone através do observer interno do Iconify.\n\nComportamento:\n- Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift\n- `lazy={true}`: ativa o observer para carregamento lazy otimizado (útil em documentos longos com muitos ícones)\n- `lazy={false}`: carregamento imediato aplicando `noobserver` (mesmo comportamento do padrão)\n\n**Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout\nque ocorriam quando ícones eram carregados depois do conteúdo inicial.", "values": [] } ], "references": [] }, { "name": "br-input", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n\n## Examples\n---\n\n\n### **Events:**\n - **valueChange** - Valor atualizado do input\n\n### **Slots:**\n - **action** - Botão à direita do input.\n- **icon** - Ícone à esquerda do input.\n- **help-text** - Personalização do texto de ajuda.\n- **feedback** - Mensagem de feedback como resposta específica a uma interação do usuário com o input. Pode ser feedback de erro, aviso, sucesso ou informação.", "attributes": [ { "name": "type", "description": "Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n- 'color': Seletor de cor\n- 'email': Campo para e-mail\n- 'hidden': Campo oculto\n- 'password': Campo para senha\n- 'range': Controle deslizante\n- 'search': Campo de pesquisa\n- 'number': Campo para números\n- 'tel': Campo para números de telefone\n- 'text': Campo de texto padrão\n- 'url': Campo para URLs", "values": [ { "name": "" }, { "name": "color" }, { "name": "email" }, { "name": "hidden" }, { "name": "password" }, { "name": "range" }, { "name": "search" }, { "name": "number" }, { "name": "tel" }, { "name": "text" }, { "name": "file" }, { "name": "url" } ] }, { "name": "autocomplete", "description": "Controla o comportamento de preenchimento automático do navegador para o input.", "values": [{ "name": "on" }, { "name": "off" }] }, { "name": "density", "description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "disabled", "description": "Desativa o input, tornando-o não interativo.", "values": [] }, { "name": "is-inline", "description": "Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).", "values": [] }, { "name": "is-highlight", "description": "Se verdadeiro, o input terá destaque visual.", "values": [] }, { "name": "state", "description": "Define o estado do input\nOs possíveis valores são:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padrão é 'info'.", "values": [ { "name": "info" }, { "name": "warning" }, { "name": "danger" }, { "name": "success" } ] }, { "name": "label", "description": "Texto exibido como rótulo do input.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "name", "description": "Nome do input, utilizado para identificação em formulários.", "values": [] }, { "name": "placeholder", "description": "Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.", "values": [] }, { "name": "readonly", "description": "Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.", "values": [] }, { "name": "required", "description": "Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.", "values": [] }, { "name": "value", "description": "Valor exibido no input.\nPode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.", "values": [] }, { "name": "control-width", "description": "Largura do campo de entrada (por exemplo, '88px').\nQuando definido, sobrescreve a largura padrão de 100%.", "values": [] }, { "name": "borderless", "description": "Remove a borda do input quando não está em foco.\nÚtil para composições contextuais (ex.: paginação).", "values": [] }, { "name": "help-text", "description": "Texto adicional que fornece ajuda ou informações sobre o input.", "values": [] }, { "name": "autocorrect", "description": "Controla a correção automática do texto.", "values": [{ "name": "off" }, { "name": "on" }] }, { "name": "min", "description": "Define o valor mínimo para campos de entrada numéricos.", "values": [] }, { "name": "max", "description": "Define o valor máximo para campos de entrada numéricos.", "values": [] }, { "name": "minlength", "description": "Define o comprimento mínimo do valor do campo de entrada.", "values": [] }, { "name": "maxlength", "description": "Define o comprimento máximo do valor do campo de entrada.", "values": [] }, { "name": "multiple", "description": "Se verdadeiro, permite a seleção de múltiplos arquivos.", "values": [] }, { "name": "pattern", "description": "Define o padrão de entrada para validação.", "values": [] }, { "name": "step", "description": "Define o valor do passo para campos de entrada numéricos.", "values": [] }, { "name": "action-label", "description": "Texto exibido no botão de ação à direita do input.", "values": [] } ], "references": [] }, { "name": "br-item", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).\n---\n\n\n### **Events:**\n - **brDidClick** - Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\nPode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n- **brDidSelect** - Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.\n\n### **Methods:**\n - **setFocus()** - Define o foco no elemento interno do componente.\nEste método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.\n\n### **Slots:**\n - **default** - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n- **start** - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.\n- **end** - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.", "attributes": [ { "name": "disabled", "description": "Desativa o item, tornando-o não interativo.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "is-active", "description": "Indica se o item está no estado ativo.\nSe definido como verdadeiro, o item será exibido como ativo.", "values": [] }, { "name": "is-selected", "description": "Indica se o item está no estado selecionado.\nSe definido como verdadeiro, o item será exibido como selecionado.", "values": [] }, { "name": "is-interactive", "description": "Marca o item como interativo, permitindo que toda a superfície do item seja clicável.", "values": [] }, { "name": "href", "description": "URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.", "values": [] }, { "name": "target", "description": "Define o alvo do link quando `href` está presente. Pode ser:\n- `_blank` para abrir em uma nova aba,\n- `_self` para abrir na mesma aba,\n- `_parent` para abrir na aba pai,\n- `_top` para abrir na aba superior.", "values": [ { "name": "_blank" }, { "name": "_self" }, { "name": "_parent" }, { "name": "_top" } ] }, { "name": "is-button", "description": "Quando definido como `true`, o item será tratado como um botão.", "values": [] }, { "name": "type", "description": "Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:\n- `'submit'` para enviar um formulário,\n- `'reset'` para redefinir um formulário,\n- `'button'` para um botão padrão.", "values": [ { "name": "submit" }, { "name": "reset" }, { "name": "button" } ] }, { "name": "value", "description": "Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.", "values": [] }, { "name": "density", "description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] } ], "references": [] }, { "name": "br-list", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/list?tab=designer).\n\n## Examples\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot padrão para inclusão dos itens da lista.\n- **header** - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).", "attributes": [ { "name": "header", "description": "Define o cabeçalho para a lista.", "values": [] }, { "name": "is-horizontal", "description": "Indica se a lista será horizontal. Por padrão, a lista é vertical.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "hide-header-divider", "description": "Indica que o divider para o título da lista estará oculto.", "values": [] }, { "name": "collapse", "description": "Indica se a lista possui o comportamento de collapse.", "values": [] }, { "name": "accordion", "description": "Indica se a lista possui o comportamento de accordion.\nO valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade.", "values": [] } ], "references": [] }, { "name": "br-loading", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/loading?tab=designer).\n---\n", "attributes": [ { "name": "is-progress", "description": "Determina o tipo de indicador a ser exibido:\n- Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso.\n- Se falso, exibirá um indicador de carregamento indeterminado.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "progress-percent", "description": "Define a porcentagem de progresso a ser exibida na barra de progresso.\nDeve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.", "values": [] }, { "name": "is-medium", "description": "Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.", "values": [] }, { "name": "label", "description": "Texto a ser exibido abaixo do indicador de carregamento.\nPode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.", "values": [] } ], "references": [] }, { "name": "br-magic-button", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/magicbutton?tab=designer).\n---\n\n\n### **Methods:**\n - **render()** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Conteúdo interno do botão (texto ou ícone).", "attributes": [ { "name": "custom-id", "description": "Identificador único.\nSe não for fornecido, será gerado automaticamente.", "values": [] }, { "name": "label", "description": "Texto do rótulo do botão.\nUtilizado como conteúdo principal quando presente.", "values": [] }, { "name": "icon", "description": "Nome do ícone a ser exibido.\nDeve corresponder a um ícone disponível no sistema de ícones.", "values": [] }, { "name": "density", "description": "Densidade do botão.\nDefine o tamanho do componente:\n- `large` para grande\n- `medium` para médio\n- `small` para pequeno", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "circle", "description": "Define se o botão terá formato circular.\nAplica contorno arredondado completo quando `true` e não houver `label`.", "values": [] }, { "name": "aria-label", "description": "Texto de acessibilidade (ARIA label).\nDeve ser fornecido para ícones sem texto para garantir acessibilidade.", "values": [] } ], "references": [] }, { "name": "br-message", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n---\n\n\n### **Events:**\n - **brDidClose** - Evento emitido quando o usuário fecha a mensagem, se closable for true.\n\n### **Slots:**\n - **default** - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.", "attributes": [ { "name": "message-title", "description": "Define o título da mensagem, que é exibido no início, acima da mensagem principal.\nEste título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.", "values": [] }, { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "message", "description": "Define o texto da mensagem que será exibido.\nEste é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.", "values": [] }, { "name": "is-inline", "description": "Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\nIsso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.", "values": [] }, { "name": "is-closable", "description": "Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\nO 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`.\nEste recurso não está disponível para mensagens do tipo feedback.", "values": [] }, { "name": "auto-remove", "description": "Controla o comportamento do fechamento do componente quando `isClosable` é verdadeiro.\n- Se definido como `true`, o componente será automaticamente removido do DOM ao clicar no botão de fechar.\n- Se definido como `false`, o componente permanecerá no DOM e apenas emitirá o evento `brDidClose`.\n\nEsta propriedade não tem efeito se `isClosable` for `false`.\nO valor padrão é `false`.", "values": [] }, { "name": "show-icon", "description": "Se definido como verdadeiro, um ícone associado à mensagem será exibido.\nUse esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.", "values": [] }, { "name": "is-feedback", "description": "Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\nExemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.", "values": [] }, { "name": "state", "description": "Define o estado do message.\nOs possíveis valores são:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padrão é 'info'.", "values": [ { "name": "info" }, { "name": "warning" }, { "name": "danger" }, { "name": "success" } ] } ], "references": [] }, { "name": "br-modal", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/modal?tab=designer).\n---\n\n\n### **Events:**\n - **brModalClose** - Evento emitido quando o modal solicita ser fechado (pelo botão 'x', tecla 'Escape' ou clique no scrim).\n\n### **Methods:**\n - **open()** - Método público para abrir o modal\n- **close()** - Método público para fechar o modal\n\n### **Slots:**\n - **header** - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.\n- **default** - Corpo do modal.\n- **footer** - Rodapé do modal.\n- **close-button** - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.", "attributes": [ { "name": "custom-id", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "values": [] }, { "name": "title-text", "description": "O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido.", "values": [] }, { "name": "show", "description": "Controla a visibilidade do modal.", "values": [] }, { "name": "auto-close", "description": "Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'.", "values": [] }, { "name": "initial-focus-selector", "description": "Seletor CSS para o elemento que deve receber foco quando o modal é aberto.", "values": [] }, { "name": "size", "description": "Define o tamanho (largura) do modal.\nValores possíveis: 'xsmall', 'small', 'medium', 'large', 'auto'.", "values": [ { "name": "xsmall" }, { "name": "small" }, { "name": "medium" }, { "name": "large" }, { "name": "auto" } ] }, { "name": "scrim", "description": "Se `true`, exibe um fundo escurecido (scrim) atrás do modal.", "values": [] }, { "name": "scrollable", "description": "Se `true`, habilita a rolagem interna do conteúdo do modal.", "values": [] }, { "name": "align-footer", "description": "Define o alinhamento do conteúdo do rodapé (slot=\"footer\").\nValores possíveis: 'start', 'end', 'center'.", "values": [ { "name": "start" }, { "name": "end" }, { "name": "center" } ] } ], "references": [] }, { "name": "br-pagination", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/pagination?tab=designer).\n\nA navegação é renderizada como um elemento `nav` com itens de página numéricos e botões\nde anterior/próximo. O componente expõe atributos ARIA