@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
1,402 lines • 454 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "components/avatar.js",
"declarations": [
{
"kind": "class",
"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",
"name": "Avatar",
"members": [
{
"kind": "field",
"name": "el",
"type": {
"text": "HTMLBrAvatarElement"
},
"description": "Referência ao elemento host do componente.\nUtilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente."
},
{
"kind": "field",
"name": "density",
"type": {
"text": "'small' | 'medium' | 'large'"
},
"default": "'medium'",
"description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido."
},
{
"kind": "field",
"name": "customId",
"type": {
"text": "string"
},
"readonly": true,
"default": "`br-avatar-${avatarId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
},
{
"kind": "field",
"name": "src",
"type": {
"text": "string"
},
"readonly": true,
"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."
},
{
"kind": "field",
"name": "alt",
"type": {
"text": "string"
},
"readonly": true,
"default": "'Foto de perfil do usuário'",
"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\"."
},
{
"kind": "field",
"name": "isIconic",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"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."
},
{
"kind": "field",
"name": "text",
"type": {
"text": "string"
},
"readonly": true,
"description": "Conteúdo textual do avatar.\nApenas o primeiro caractere será exibido em maiúscula."
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"description": "Define se o avatar está desabilitado"
},
{
"kind": "field",
"name": "textBackgroundColor",
"type": {
"text": "string"
},
"readonly": true,
"description": "Cor de fundo personalizada para o avatar do tipo texto"
},
{
"kind": "field",
"name": "hasError",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "method",
"name": "handleDensityChange",
"parameters": [
{
"name": "newValue",
"type": {
"text": "'small' | 'medium' | 'large'"
}
}
],
"description": "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."
},
{
"kind": "method",
"name": "getCssClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
},
"description": "Gera um mapa de classes CSS com base nas propriedades do componente."
},
{
"kind": "method",
"name": "hasContent",
"privacy": "private",
"return": {
"type": {
"text": "boolean"
}
},
"parameters": [
{
"name": "value",
"type": {
"text": "string"
},
"description": "String a ser verificada"
}
],
"description": "Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco)."
},
{
"kind": "field",
"name": "handleImageError",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "getContentClasses",
"privacy": "private",
"return": {
"type": {
"text": "string"
}
},
"description": "Obtém as classes CSS para o elemento content."
},
{
"kind": "method",
"name": "setCustomBackgroundColor",
"privacy": "private",
"description": "Define a variável CSS para cor de fundo personalizada para o avatar texto."
},
{
"kind": "method",
"name": "getAriaLabel",
"privacy": "private",
"return": {
"type": {
"text": "string"
}
},
"description": "Gera aria-label apropriado baseado no tipo de avatar\nPrioriza aria-label do host, senão gera automaticamente"
},
{
"kind": "method",
"name": "getIconSize",
"privacy": "private",
"return": {
"type": {
"text": "string"
}
},
"description": "Obtém o valor do token do DS para altura do ícone"
},
{
"kind": "method",
"name": "getIconWidth",
"privacy": "private",
"return": {
"type": {
"text": "string"
}
},
"description": "Obtém o valor do token do DS para largura do ícone (altura + 8px)"
},
{
"kind": "method",
"name": "renderTextAvatar",
"privacy": "private",
"description": "Renderiza o avatar do tipo 'letra/texto'.\nExibe a primeira letra do texto em maiúscula."
},
{
"kind": "method",
"name": "renderImageAvatar",
"privacy": "private",
"description": "Renderiza o avatar do tipo 'fotográfico/imagem'.\nExibe uma imagem carregada via URL."
},
{
"kind": "method",
"name": "renderIconAvatar",
"privacy": "private",
"description": "Renderiza o avatar do tipo 'icônico'.\nExibe um ícone padrão (fa-solid:user) posicionado na base do avatar."
},
{
"kind": "method",
"name": "renderAvatar",
"privacy": "private",
"description": "Método principal de renderização do avatar.\nPrioridade: isIconic > texto > imagem > ícone (padrão)"
},
{
"kind": "method",
"name": "render"
}
],
"attributes": [
{
"name": "density",
"fieldName": "density",
"default": "'medium'",
"description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.",
"type": {
"text": "'small' | 'medium' | 'large'"
}
},
{
"name": "custom-id",
"fieldName": "customId",
"default": "`br-avatar-${avatarId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.",
"type": {
"text": "string"
}
},
{
"name": "src",
"fieldName": "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.",
"type": {
"text": "string"
}
},
{
"name": "alt",
"fieldName": "alt",
"default": "'Foto de perfil do usuário'",
"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\"."
},
{
"name": "is-iconic",
"fieldName": "isIconic",
"default": "false",
"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.",
"type": {
"text": "boolean"
}
},
{
"name": "text",
"fieldName": "text",
"description": "Conteúdo textual do avatar.\nApenas o primeiro caractere será exibido em maiúscula.",
"type": {
"text": "string"
}
},
{
"name": "disabled",
"fieldName": "disabled",
"default": "false",
"description": "Define se o avatar está desabilitado"
},
{
"name": "text-background-color",
"fieldName": "textBackgroundColor",
"description": "Cor de fundo personalizada para o avatar do tipo texto",
"type": {
"text": "string"
}
}
],
"tagName": "br-avatar",
"events": [],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "Avatar",
"declaration": {
"name": "Avatar",
"module": "components/avatar.js"
}
},
{
"kind": "custom-element-definition",
"name": "br-avatar",
"declaration": {
"name": "Avatar",
"module": "components/avatar.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "components/breadcrumb.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "Breadcrumb",
"members": [
{
"kind": "field",
"name": "el",
"type": {
"text": "HTMLBrBreadcrumbElement"
}
},
{
"kind": "field",
"name": "elementInternals",
"type": {
"text": "ElementInternals"
}
},
{
"kind": "field",
"name": "customId",
"type": {
"text": "string"
},
"readonly": true,
"default": "`br-breadcrumb-${breadcrumbId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
},
{
"kind": "field",
"name": "homeUrl",
"type": {
"text": "string"
},
"default": "'/'",
"description": "URL para home.\nCaso não seja fornecido, o valor padrão será /."
},
{
"kind": "field",
"name": "crumbs",
"type": {
"text": "string | BreadcrumbItem[]"
},
"description": "Define o array de objetos que receberá os nomes e links do breadcrumb.\nDefine valor padrão do breadcrumb 'defaultCrumbs'."
},
{
"kind": "field",
"name": "defaultCrumbs",
"type": {
"text": "BreadcrumbItem[]"
},
"privacy": "private",
"default": "[ { label: 'Página 01', url: '/pagina-01' }, { label: 'Página 02', url: '/pagina-02' }, { label: 'Página Atual', active: true }, ]"
},
{
"kind": "field",
"name": "showTooltip",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define o estado oculto ou visível do tooltip."
},
{
"kind": "field",
"name": "tooltipPosition",
"type": {
"text": "{ x: number; y: number }"
},
"default": "{ x: 0, y: 0 }",
"description": "Define o posicionamento do tooltip na tela."
},
{
"kind": "field",
"name": "tooltipText",
"type": {
"text": "string"
},
"default": "''",
"description": "Define o texto do tooltip."
},
{
"kind": "field",
"name": "isSmallScreen",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define o estado isSmallScreen, usado para verificar a largura do container pai e aplicar as mudanças do formato mobile.\nNo formato mobile o breadcrumb apresenta um comportamento específico."
},
{
"kind": "field",
"name": "isTruncate",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define se o breadcrumb deve truncar os itens por falta de espaço."
},
{
"kind": "field",
"name": "larguraInterna",
"type": {
"text": "number"
},
"default": "0",
"description": "Largura interna dos itens do breadcrumb."
},
{
"kind": "field",
"name": "larguraPai",
"type": {
"text": "number"
},
"default": "0",
"description": "Largura do container pai do breadcrumb."
},
{
"kind": "field",
"name": "isFolderOpen",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define o estado do botão 'Folder'.\nCaso a lista dropdown esteja oculta o ícone no botão será 'folder-plus'.\nCaso a lista dropdown esteja visível o ícone no botão será 'folder-minus'."
},
{
"kind": "method",
"name": "trunc",
"privacy": "private",
"parameters": [
{
"name": "word",
"type": {
"text": "string"
}
}
],
"description": "Verifica se o texto do link contém mais de 20 caracteres e realiza o truncamento deste caso positivo.\nO número de caracteres pode ser configurado na variável 'charactersNumberTruncate'."
},
{
"kind": "method",
"name": "handleMouseOver",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
},
{
"name": "text",
"type": {
"text": "string"
}
}
],
"description": "Exibe o tooltip e define seu posicionamento, caso o usuário realize o 'mouse over'."
},
{
"kind": "method",
"name": "handleMouseOut",
"privacy": "private",
"description": "Esconde o tooltip caso o usuário realize o 'mouse out'."
},
{
"kind": "method",
"name": "getParsedItems",
"privacy": "private",
"return": {
"type": {
"text": "BreadcrumbItem[]"
}
},
"description": "Converte de string para JSON o valor passado na propriedade 'crumbs'.\nRetorna o valor padrão do Breadcrumbs caso crumbs seja vazio ou inválido"
},
{
"kind": "method",
"name": "handleHomeClick",
"privacy": "private",
"description": "Ao clicar no botão HOME, direciona o usuário para URL passada na propriedade 'homeUrl'."
},
{
"kind": "method",
"name": "toggleFolder",
"privacy": "private",
"description": "Altera o estado do botão 'Folder', caso a lista dropdown esteja aberta ou fechada."
},
{
"kind": "method",
"name": "getCssClassMap",
"privacy": "private",
"return": {
"type": {
"text": "{ [key: string]: boolean }"
}
},
"description": "Define as classes CSS usadas no breadcrumb."
},
{
"kind": "field",
"name": "resizeObserver",
"type": {
"text": "ResizeObserver"
},
"privacy": "private",
"description": "Atualiza o estado 'isSmallScreen' com base no tamanho do container pai, se menor que 570px."
},
{
"kind": "field",
"name": "updateContainerSize",
"privacy": "private",
"description": "Atualiza os estados de largura do breadcrumb ao detectar mudanças no container pai."
},
{
"kind": "method",
"name": "calcularLarguraItens",
"privacy": "private",
"description": "Calcula a largura total dos itens do breadcrumb para determinar se precisa de truncamento."
},
{
"kind": "method",
"name": "renderHomeButton",
"privacy": "private",
"description": "Renderiza botão Home"
},
{
"kind": "method",
"name": "renderTruncateButton",
"privacy": "private",
"description": "Renderiza botão Folder no comportamento truncado"
},
{
"kind": "method",
"name": "renderBreadcrumbItems",
"privacy": "private",
"description": "Renderiza itens do Breadcrumb no comportamento mobile ou truncado"
},
{
"kind": "method",
"name": "renderMobileActiveItem",
"privacy": "private",
"parameters": [
{
"name": "parsedItems",
"type": {
"text": "BreadcrumbItem[]"
}
}
],
"description": "Renderiza item da página atual"
},
{
"kind": "method",
"name": "renderBreadcrumbList",
"privacy": "private",
"parameters": [
{
"name": "parsedItems",
"type": {
"text": "BreadcrumbItem[]"
}
}
],
"description": "Renderiza Lista dropdown contendo os itens do Breadcrumb"
},
{
"kind": "method",
"name": "renderBreadcrumbLink",
"privacy": "private",
"parameters": [
{
"name": "item",
"type": {
"text": "BreadcrumbItem"
}
}
],
"description": "Renderiza itens do Breadcrumb no formato desktop"
},
{
"kind": "method",
"name": "renderTooltip",
"privacy": "private",
"description": "Renderiza Tooltip"
},
{
"kind": "method",
"name": "handleKeyDown",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"description": "Controla navegação pelo teclado após lista de itens aberta\nDispara foco no primeiro item da lista flutuante"
},
{
"kind": "method",
"name": "handleKeyDownOut",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"description": "Ao finalizar navegação por teclado dentro da lista, dispara foco no item fora da lista flutuante"
},
{
"kind": "method",
"name": "render"
}
],
"attributes": [
{
"name": "custom-id",
"fieldName": "customId",
"default": "`br-breadcrumb-${breadcrumbId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.",
"type": {
"text": "string"
}
},
{
"name": "home-url",
"fieldName": "homeUrl",
"default": "'/'",
"description": "URL para home.\nCaso não seja fornecido, o valor padrão será /.",
"type": {
"text": "string"
}
},
{
"name": "crumbs",
"fieldName": "crumbs",
"description": "Define o array de objetos que receberá os nomes e links do breadcrumb.\nDefine valor padrão do breadcrumb 'defaultCrumbs'.",
"type": {
"text": "string | BreadcrumbItem[]"
}
}
],
"tagName": "br-breadcrumb",
"events": [],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "Breadcrumb",
"declaration": {
"name": "Breadcrumb",
"module": "components/breadcrumb.js"
}
},
{
"kind": "custom-element-definition",
"name": "br-breadcrumb",
"declaration": {
"name": "Breadcrumb",
"module": "components/breadcrumb.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "components/button.js",
"declarations": [
{
"kind": "class",
"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",
"name": "Button",
"cssParts": [
{
"description": "Elemento button interno. Use para aplicar estilos customizados através de ::part(button).",
"name": "button"
}
],
"slots": [
{
"description": "Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.",
"name": "default"
}
],
"members": [
{
"kind": "field",
"name": "el",
"type": {
"text": "HTMLBrButtonElement"
},
"description": "Referência ao elemento host do componente.\nUtilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente."
},
{
"kind": "field",
"name": "elementInternals",
"type": {
"text": "ElementInternals"
}
},
{
"kind": "field",
"name": "colorMode",
"type": {
"text": "'dark'"
},
"readonly": true,
"description": "Define se o botão usará um esquema de cores escuro."
},
{
"kind": "field",
"name": "customId",
"type": {
"text": "string"
},
"readonly": true,
"default": "`br-button-${buttonId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
},
{
"kind": "field",
"name": "density",
"type": {
"text": "'large' | 'medium' | 'small'"
},
"readonly": true,
"default": "'medium'",
"description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido."
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"description": "Desativa o botão, tornando-o não interativo."
},
{
"kind": "field",
"name": "emphasis",
"type": {
"text": "'primary' | 'secondary' | 'tertiary'"
},
"readonly": true,
"description": "Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes."
},
{
"kind": "field",
"name": "isActive",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"description": "Indica se o botão está no estado ativo.\nSe definido como verdadeiro, o botão será exibido como ativo."
},
{
"kind": "field",
"name": "isLoading",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"description": "Aplica o estado de \"progresso\" ao botão.\nO botão exibirá um indicador de carregamento ou progresso."
},
{
"kind": "field",
"name": "shape",
"type": {
"text": "'circle' | 'block' | 'pill'"
},
"readonly": true,
"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."
},
{
"kind": "field",
"name": "type",
"type": {
"text": "'button' | 'reset' | 'submit'"
},
"readonly": true,
"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."
},
{
"kind": "field",
"name": "value",
"type": {
"text": "string"
},
"readonly": true,
"description": "Define o valor inicial do botão em um formulário."
},
{
"kind": "field",
"name": "ariaLabel",
"type": {
"text": "string"
},
"readonly": true,
"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."
},
{
"kind": "field",
"name": "ariaPressed",
"type": {
"text": "string"
},
"readonly": true,
"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'."
},
{
"kind": "field",
"name": "handleClick",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "getCssClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
}
},
{
"kind": "method",
"name": "render"
}
],
"attributes": [
{
"name": "color-mode",
"fieldName": "colorMode",
"description": "Define se o botão usará um esquema de cores escuro.",
"type": {
"text": "'dark'"
}
},
{
"name": "custom-id",
"fieldName": "customId",
"default": "`br-button-${buttonId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.",
"type": {
"text": "string"
}
},
{
"name": "density",
"fieldName": "density",
"default": "'medium'",
"description": "Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.",
"type": {
"text": "'large' | 'medium' | 'small'"
}
},
{
"name": "disabled",
"fieldName": "disabled",
"default": "false",
"description": "Desativa o botão, tornando-o não interativo.",
"type": {
"text": "boolean"
}
},
{
"name": "emphasis",
"fieldName": "emphasis",
"description": "Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.",
"type": {
"text": "'primary' | 'secondary' | 'tertiary'"
}
},
{
"name": "is-active",
"fieldName": "isActive",
"default": "false",
"description": "Indica se o botão está no estado ativo.\nSe definido como verdadeiro, o botão será exibido como ativo.",
"type": {
"text": "boolean"
}
},
{
"name": "is-loading",
"fieldName": "isLoading",
"default": "false",
"description": "Aplica o estado de \"progresso\" ao botão.\nO botão exibirá um indicador de carregamento ou progresso.",
"type": {
"text": "boolean"
}
},
{
"name": "shape",
"fieldName": "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.",
"type": {
"text": "'circle' | 'block' | 'pill'"
}
},
{
"name": "type",
"fieldName": "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.",
"type": {
"text": "'button' | 'reset' | 'submit'"
}
},
{
"name": "value",
"fieldName": "value",
"description": "Define o valor inicial do botão em um formulário.",
"type": {
"text": "string"
}
},
{
"name": "aria-label",
"fieldName": "ariaLabel",
"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.",
"type": {
"text": "string"
}
},
{
"name": "aria-pressed",
"fieldName": "ariaPressed",
"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'.",
"type": {
"text": "string"
}
}
],
"tagName": "br-button",
"csspart": {
"name": "button",
"description": "Elemento button interno. Use para aplicar estilos customizados através de ::part(button)."
},
"events": [],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "Button",
"declaration": {
"name": "Button",
"module": "components/button.js"
}
},
{
"kind": "custom-element-definition",
"name": "br-button",
"declaration": {
"name": "Button",
"module": "components/button.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "components/card.js",
"declarations": [
{
"kind": "class",
"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).",
"name": "BrCard",
"slots": [
{
"description": "Conteúdo principal do card quando não usar slots estruturados",
"name": "default"
},
{
"description": "Conteúdo do cabeçalho do card",
"name": "header"
},
{
"description": "Conteúdo principal do card (quando usar estrutura com slots)",
"name": "content"
},
{
"description": "Conteúdo do rodapé do card",
"name": "footer"
}
],
"members": [
{
"kind": "field",
"name": "el",
"type": {
"text": "HTMLBrCardElement"
},
"description": "Referência ao elemento host do componente.\nUtilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente."
},
{
"kind": "field",
"name": "elementInternals",
"type": {
"text": "ElementInternals"
}
},
{
"kind": "field",
"name": "customId",
"type": {
"text": "string"
},
"readonly": true,
"default": "`br-card-${brCardId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define se o card está desabilitado.\nQuando true, o card fica com opacidade reduzida e não responde a interações."
},
{
"kind": "field",
"name": "hover",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define se o card tem hover interativo.\nQuando true, o card terá efeitos visuais ao passar o mouse."
},
{
"kind": "field",
"name": "hasHeader",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "hasContent",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "hasFooter",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "method",
"name": "checkSlots",
"privacy": "private"
},
{
"kind": "method",
"name": "getCssClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
}
},
{
"kind": "method",
"name": "getHeaderClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
}
},
{
"kind": "method",
"name": "getContentClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
}
},
{
"kind": "method",
"name": "getFooterClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
}
},
{
"kind": "method",
"name": "render"
}
],
"attributes": [
{
"name": "custom-id",
"fieldName": "customId",
"default": "`br-card-${brCardId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.",
"type": {
"text": "string"
}
},
{
"name": "disabled",
"fieldName": "disabled",
"default": "false",
"description": "Define se o card está desabilitado.\nQuando true, o card fica com opacidade reduzida e não responde a interações.",
"type": {
"text": "boolean"
}
},
{
"name": "hover",
"fieldName": "hover",
"default": "false",
"description": "Define se o card tem hover interativo.\nQuando true, o card terá efeitos visuais ao passar o mouse.",
"type": {
"text": "boolean"
}
}
],
"tagName": "br-card",
"events": [],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "BrCard",
"declaration": {
"name": "BrCard",
"module": "components/card.js"
}
},
{
"kind": "custom-element-definition",
"name": "br-card",
"declaration": {
"name": "BrCard",
"module": "components/card.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "components/checkbox.js",
"declarations": [
{
"kind": "class",
"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",
"name": "Checkbox",
"slots": [
{
"description": "O texto descritivo pode ser passado por propriedade (label) ou por slot.",
"name": "default"
}
],
"members": [
{
"kind": "field",
"name": "el",
"type": {
"text": "HTMLBrCheckboxElement"
},
"description": "Referência ao elemento host do componente.\nUtilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente."
},
{
"kind": "field",
"name": "elementInternals",
"type": {
"text": "ElementInternals"
}
},
{
"kind": "field",
"name": "indeterminate",
"type": {
"text": "boolean"
},
"default": "false",
"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."
},
{
"kind": "field",
"name": "checked",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Define o estado de seleção do checkbox.\nSe definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado."
},
{
"kind": "field",
"name": "customId",
"type": {
"text": "string"
},
"readonly": true,
"default": "`br-checkbox-${checkboxId++}`",
"description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"description": "Desativa o checkbox, tornando-o não interativo."
},
{
"kind": "field",
"name": "hasHiddenLabel",
"type": {
"text": "boolean"
},
"readonly": true,
"default": "false",
"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."
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"readonly": true,
"description": "Texto descritivo exibido à direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado."
},
{
"kind": "field",
"name": "name",
"type": {
"text": "string"
},
"readonly": true,
"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."
},
{
"kind": "field",
"name": "state",
"type": {
"text": "'valid' | 'invalid'"
},
"readonly": true,
"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."
},
{
"kind": "field",
"name": "value",
"type": {
"text": "string"
},
"readonly": true,
"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`."
},
{
"kind": "field",
"name": "slotDefault",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "method",
"name": "updateIndeterminate",
"parameters": [
{
"name": "newValue",
"type": {
"text": "boolean"
}
}
]
},
{
"kind": "method",
"name": "hasSlotContentDefault",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "getCssClassMap",
"privacy": "private",
"return": {
"type": {
"text": "CssClassMap"
}
}
},
{
"kind": "method",
"name": "getAriaCheckedValue",
"privacy": "private",
"return": {
"type": {
"text": "string"
}
}
},
{
"kind": "field",
"name": "handleCheckedChange",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "setIndeterminate",
"parameters": [
{
"name": "value",
"type": {
"text": "boolean"
},
"description": "Novo valor para o estado indeterminado."
}
],
"description": "Define o estado indeterminado do checkbox."
},
{
"kind": "method",
"name": "toggleChecked",
"description": "Inverte o valor da prop `checked`"
},
{
"kind": "method",
"name": "render"
}
],
"attributes": [
{
"name": "indeterminate",
"fieldName": "indeterminate",
"default": "false",
"description": "Def