{ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json", "version": 1.1, "tags": [ { "name": "br-breadcrumb", "description": "## Design System\n\nPara 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).\n---\n", "attributes": [ { "name": "custom-id", "description": "Identificador único; gerado automaticamente quando omitido.", "values": [] }, { "name": "home-url", "description": "Caso 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": "## Design System\n\nPara 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).\n---\n\n\n### **Slots:**\n - **default** - Slot para o rótulo ou conteúdo do botão.\n\n### **CSS Parts:**\n - **button** - Parte para o elemento button interno, usada para estilos customizados via ::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; gerado automaticamente quando omitido.", "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.", "values": [ { "name": "circle" }, { "name": "block" }, { "name": "pill" } ] }, { "name": "type", "description": "Define o tipo de botão, especificando seu comportamento padrão.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] }, { "name": "value", "description": "Define o valor inicial do botão em um formulário.", "values": [] }, { "name": "custom-tab-index", "description": "Define o índice de tabulação do botão.\nÚ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.", "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-avatar", "description": "## Design System\n\nPara 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).\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; gerado automaticamente quando omitido.", "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": "bg-color", "description": "Permite definir a cor de fundo do componente.\nAceita os seguintes formatos de cor:\n- Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.\n- Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.\n- Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.\n- Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.\n- Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.\n- Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.\nSe não especificada, usa a cor padrão do tema.", "values": [] } ], "references": [] }, { "name": "br-card", "description": "## Design System\n\nPara 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).\n---\n\n\n### **Slots:**\n - **default** - Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.\n- **header** - Slot para o conteúdo do cabeçalho do card.\n- **content** - Slot para o corpo principal do card ao usar a estrutura de slots.\n- **footer** - Slot para o conteúdo do rodapé do card.", "attributes": [ { "name": "custom-id", "description": "Identificador único; gerado automaticamente quando omitido.", "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": "## Design System\n\nPara 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).\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- **setNumberOfChildren(value: _number_)** - Define o número de checkboxes filhos em um grupo de checkboxes.\n\n### **Slots:**\n - **default** - Slot para o rótulo do checkbox, como alternativa à propriedade label.", "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.\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 (`
`).\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": [] }, { "name": "is-father", "description": "Indica se o checkbox é pai de um grupo de checkboxes.", "values": [] } ], "references": [] }, { "name": "br-checkgroup", "description": "## Design System\n\nPara 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).\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": "## Design System\n\nPara 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).\n---\n\n\n### **Events:**\n - **brDidOpen** - Emitido ao expandir, com o identificador e o grupo de accordion.\n- **brDidClose** - Emitido ao recolher, com o identificador e o grupo de accordion.\n\n### **Methods:**\n - **handleOpen(event: _CustomEvent<{ id: string; accordionGroup: string }>_)** - Fecha este collapse quando outro do mesmo grupo é aberto.\n- **openCollapse()** - Abre o collapse programaticamente.\n- **closeCollapse()** - Fecha o collapse programaticamente.\n- **render()** - Renderiza o
com acionador e conteúdo expansível.\n\n### **Slots:**\n - **default** - Slot para o conteúdo expansível exibido ao abrir o collapse.\n- **trigger** - Slot para personalizar o acionador (texto, ícones, imagens, etc.).", "attributes": [ { "name": "custom-id", "description": "Identificador único do componente. Um valor é gerado automaticamente quando não informado.", "values": [] }, { "name": "open", "description": "Controla se o collapse está aberto.", "values": [] }, { "name": "accordion-group", "description": "Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez no mesmo grupo.", "values": [] }, { "name": "icon-to-show", "description": "Classe CSS do ícone exibido quando o conteúdo está oculto.", "values": [] }, { "name": "icon-to-hide", "description": "Classe CSS do ícone exibido quando o conteúdo está visível.", "values": [] }, { "name": "icon-position", "description": "Define a posição do ícone no acionador: 'left' ou 'right'.", "values": [{ "name": "left" }, { "name": "right" }] } ], "references": [] }, { "name": "br-datetime-picker", "description": "Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/datetime-picker?tab=designer).\n---\n\n\n### **Events:**\n - **brDateTimeChange** - Evento disparado quando a data selecionada é alterada, tanto por interação do usuário quanto por métodos programáticos.\n\n### **Methods:**\n \n- **close()** - Fecha o dropdown do calendário.\n- **getValue(): _Promise_** - Retorna a data atualmente selecionada no datetime-picker.\n- **open()** - Abre o dropdown do calendário.\n- **reset()** - Reseta o estado interno do componente para os valores iniciais.\n- **setValue(value: _Date | null_)** - Define a data selecionada no datetime-picker.\n- **toggle()** - Alterna o estado do dropdown do calendário entre aberto e fechado.\n- **formResetCallback()** - Manipulador de reset do formulário.\n- **render(): __** - Renderiza o componente datetime-picker", "attributes": [ { "name": "auto-select-today", "description": "Define se a data atual deve ser selecionada automaticamente ao abrir o datetime-picker.\nO padrão é false", "values": [] }, { "name": "disabled", "description": "Define se o datetime-picker está desabilitado.", "values": [] }, { "name": "mode", "description": "Define o modo do datetime-picker.\nOs valores possíveis são:\n- \"date\": Permite selecionar apenas a data.\n- \"time\": Permite selecionar apenas o horário.\n- \"datetime\": Permite selecionar tanto a data quanto o horário.", "values": [{ "name": "DatetimePickerMode" }] }, { "name": "name", "description": "Define o nome do campo do datetime-picker.\nEste nome será utilizado ao submeter o formulário que contém o datetime-picker.", "values": [] }, { "name": "placeholder", "description": "Define o placeholder do campo de entrada do datetime-picker.", "values": [] }, { "name": "value", "description": "Define o valor inicial do datetime-picker.\nPode ser uma instância de Date ou null.\nSe não for fornecido, o valor padrão será null.", "values": [{ "name": "Date" }] }, { "name": "week-starts-on", "description": "Define o dia da semana em que a semana começa.\nOs valores possíveis são:\n0 - Domingo\n1 - Segunda-feira\n2 - Terça-feira\n3 - Quarta-feira\n4 - Quinta-feira\n5 - Sexta-feira\n6 - Sábado", "values": [{ "name": "WeekDayIndex" }] } ], "references": [] }, { "name": "br-divider", "description": "## Design System\n\nPara 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).\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\n### **Slots:**\n - **default** - Slot opcional para conteúdo dentro do divisor (texto, ícones ou 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": "Orientação do divisor.Em modo vertical, posicione dentro de um container com `display: flex`.", "values": [{ "name": "DividerOrientation" }] }, { "name": "thickness", "description": "Espessura visual do divisor.", "values": [{ "name": "DividerThickness" }] }, { "name": "border-style", "description": "Estilo de borda do divisor.", "values": [{ "name": "DividerBorderStyle" }] }, { "name": "is-dark-mode", "description": "Ativa variante de alto contraste para fundos escuros.", "values": [] }, { "name": "color", "description": "Cor do divisor.\nAceita os seguintes formatos de cor:\n- Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.\n- Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.\n- Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.\n- Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.\n- Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.\n- Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.\nSe não definida, usa a cor padrão do tema.", "values": [] }, { "name": "align", "description": "Alinhamento do conteúdo quando há slot interno.", "values": [{ "name": "DividerAlign" }] }, { "name": "bleed", "description": "Faz o divisor ocupar toda a largura do container, compensando paddings laterais.", "values": [] }, { "name": "margin-top", "description": "Margin top em pixels; se omitido, aplica padrão interno.", "values": [] }, { "name": "margin-bottom", "description": "Margin bottom em pixels; se omitido, aplica padrão interno.", "values": [] }, { "name": "margin-left", "description": "Margin left em pixels; se omitido, aplica padrão interno.", "values": [] }, { "name": "margin-right", "description": "Margin right em pixels; se omitido, aplica padrão interno.", "values": [] } ], "references": [] }, { "name": "br-dropdown", "description": "## Design System\n\nPara 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).\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 para o elemento que aciona a abertura do dropdown.\n- **target** - Slot para o conteúdo exibido pelo dropdown.", "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).", "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": "## Design System\n\nPara 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).\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **logo** - Slot para o logo do rodapé, utilizando o componente br-logo.\n- **default** - Slot para o mapa do site, utilizando br-footer-category e br-footer-item.\n- **social-network** - Slot para as redes sociais, utilizando br-footer-social.\n- **partner-logo** - Slot para logos de parceiros, utilizando br-logo.\n- **legal** - Slot para informações legais, utilizando br-footer-legal.", "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-header", "description": "## Design System\n\nPara 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).\n---\n\n\n### **Events:**\n - **headerCompactChange** - Evento disparado quando o cabeçalho entra ou sai do modo compacto.\nO evento contém os detalhes do estado compacto e o ID do componente pai.\n- **headerWidthChange** - Evento disparado para indicar qual lista deve encolher primeiro.\nO evento contém os detalhes do ID do componente pai e o nome da lista.\n\n### **Methods:**\n - **watchIsCompact(newValue: _boolean_)** - Observa mudanças na propriedade isCompact.\n- **resetHeaderList()** - Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento.\nPode ser chamado externamente para forçar a atualização das listas.\n- **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **logo** - Slot para a logo do cabeçalho.\n- **signature** - Slot para a assinatura visual da organização.\n- **links** - Slot para links de navegação principais.\n- **functions** - Slot para botões de ação no cabeçalho.\n- **search** - Slot para o campo de busca.\n- **access** - Slot para o botão de acesso ou autenticação.\n- **menu-trigger** - Slot para o botão que abre o menu.\n- **caption** - Slot para o título do cabeçalho.\n- **subcaption** - Slot para o subtítulo do cabeçalho.", "attributes": [ { "name": "caption", "description": "Texto exibido como título do cabeçalho.", "values": [] }, { "name": "caption-url", "description": "URL associada ao título do cabeçalho.", "values": [] }, { "name": "custom-id", "description": "Identificador único do cabeçalho; gerado automaticamente quando omitido.", "values": [] }, { "name": "density", "description": "Densidade do cabeçalho: controla espaçamento e proporções.", "values": [{ "name": "HeaderDensity" }] }, { "name": "is-compact", "description": "Ativa o modo compacto do cabeçalho.", "values": [] }, { "name": "is-sticky", "description": "Fixa o cabeçalho no topo durante a rolagem.", "values": [] }, { "name": "signature", "description": "Texto da assinatura exibida ao lado da logo.", "values": [] }, { "name": "shrink-first", "description": "Define qual lista encolhe primeiro quando o espaço é limitado.", "values": [{ "name": "links" }, { "name": "functions" }] }, { "name": "subcaption", "description": "Texto exibido como subtítulo do cabeçalho.", "values": [] }, { "name": "subcaption-url", "description": "URL associada ao subtítulo do cabeçalho.", "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.", "values": [ { "name": "90deg" }, { "name": "180deg" }, { "name": "270deg" } ] }, { "name": "flip", "description": "Define o tipo de espelhamento do ícone.", "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": "## Design System\n\nPara 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).\n---\n\n\n### **Events:**\n - **valueChange** - Valor atualizado do input\n\n### **Methods:**\n - **render(): __** - Renderiza o componente de 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.", "values": [{ "name": "InputType" }] }, { "name": "autocomplete", "description": "Controla o comportamento de preenchimento automático do navegador para o input.", "values": [{ "name": "InputToggle" }] }, { "name": "density", "description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.", "values": [{ "name": "InputDensity" }] }, { "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", "values": [{ "name": "InputState" }] }, { "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": "InputToggle" }] }, { "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": "mask", "description": "Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas).", "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": [] }, { "name": "action-tab-index", "description": "Define o tabindex do botão de ação.\nÚtil para remover o botão da sequência de tabulação quando o foco é gerenciado externamente (ex.: br-select).", "values": [] } ], "references": [] }, { "name": "br-item", "description": "## Design System\n\nPara 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).\n---\n\n\n### **Events:**\n - **brDidClick** - Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`