{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "components/avatar.js", "declarations": [ { "kind": "class", "description": "O `br-avatar` representa uma pessoa ou entidade de forma compacta: mostra uma foto, a primeira letra de um nome ou um ícone de usuário.\n\n### Como o conteúdo é escolhido\n\n1. Com `iconic`, mostra sempre o ícone de usuário.\n2. Com `text`, mostra a primeira letra do texto em maiúscula.\n3. Com `src`, mostra a imagem. Se ela não carregar, mostra o ícone.\n4. Sem nenhum deles, mostra o ícone.\n\n```html\n\n\n\n```\n\nPara indicar disponibilidade, ative `status`. A cor fica em `status-bg-color` e o texto lido pelo leitor de tela, em `status-label`. Para outro indicador, use o slot `status`.\n\n### Quando usar\n\n- Identificar a pessoa autenticada no cabeçalho ou no menu.\n- Mostrar autores, contatos ou participantes em listas.\n\n### Quando evitar\n\n- Imagens grandes ou ilustrativas: use ``.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/avatar?tab=designer).", "name": "Avatar", "cssParts": [ { "description": "Elemento externo do avatar.", "name": "container" }, { "description": "Conteúdo interno do avatar (imagem, ícone ou texto).", "name": "content" }, { "description": "Indicador de status posicionado sobre o avatar.", "name": "status" } ], "slots": [ { "description": "Conteúdo customizado para o indicador de status. Quando usado, substitui a tag padrão.", "name": "status" } ], "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": "hasError", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Indica falha no carregamento da imagem para acionar fallback visual." }, { "kind": "field", "name": "density", "type": { "text": "AvatarDensity" }, "default": "'medium'", "description": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).\n- `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espaçamento e altura).\n\nValores inválidos usam `medium`.", "parsedType": { "text": "'small' | 'medium' | 'large'" } }, { "kind": "field", "name": "customId", "type": { "text": "string" }, "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId()." }, { "kind": "field", "name": "src", "type": { "text": "string" }, "default": "''", "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" }, "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" }, "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.", "deprecated": "Use `iconic`." }, { "kind": "field", "name": "iconic", "type": { "text": "boolean | undefined" }, "description": "Exibe a variação icônica. Quando informada, tem precedência sobre `isIconic`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "text", "type": { "text": "string" }, "default": "''", "description": "Conteúdo textual do avatar.\nApenas o primeiro caractere será exibido em maiúscula." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Desabilita a interação com o componente." }, { "kind": "field", "name": "bgColor", "type": { "text": "string" }, "default": "'#DBE8FB'", "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." }, { "kind": "field", "name": "status", "type": { "text": "boolean" }, "default": "false", "description": "Exibe um indicador de status no avatar." }, { "kind": "field", "name": "statusBgColor", "type": { "text": "string" }, "default": "'rgb(22, 136, 33)'", "description": "Cor de fundo do indicador de status padrão." }, { "kind": "field", "name": "statusLabel", "type": { "text": "string" }, "default": "'Status do usuário'", "description": "Rótulo acessível do indicador de status padrão." }, { "kind": "field", "name": "statusSize", "type": { "text": "string" }, "default": "'12px'", "description": "Tamanho do indicador de status padrão." }, { "kind": "field", "name": "statusPosition", "type": { "text": "AvatarStatusPosition" }, "default": "'top-right'", "description": "Posição do indicador de status sobre o avatar. Aceita `top-right`, `bottom-right`, `top-left` ou `bottom-left`.\nValores inválidos usam `top-right`.", "parsedType": { "text": "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'" } }, { "kind": "field", "name": "effectiveStatusPosition", "type": { "text": "AvatarStatusPosition" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'" } }, { "kind": "method", "name": "handleDensityChange", "parameters": [ { "name": "newValue", "type": { "text": "AvatarDensity" } } ], "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": "handleBackgroundColorChange" }, { "kind": "method", "name": "setFocus", "description": "Move o foco programaticamente para o avatar." }, { "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": "method", "name": "hasStatusSlot", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "field", "name": "handleImageError", "privacy": "private" }, { "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": "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": "renderStatus", "privacy": "private" }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "density", "fieldName": "density", "default": "'medium'", "description": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).\n- `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espaçamento e altura).\n\nValores inválidos usam `medium`.", "type": { "text": "AvatarDensity" }, "parsedType": { "text": "'small' | 'medium' | 'large'" } }, { "name": "custom-id", "fieldName": "customId", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "type": { "text": "string" } }, { "name": "src", "fieldName": "src", "default": "''", "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." }, { "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." }, { "name": "iconic", "fieldName": "iconic", "description": "Exibe a variação icônica. Quando informada, tem precedência sobre `isIconic`.", "type": { "text": "boolean" } }, { "name": "text", "fieldName": "text", "default": "''", "description": "Conteúdo textual do avatar.\nApenas o primeiro caractere será exibido em maiúscula." }, { "name": "disabled", "fieldName": "disabled", "default": "false", "description": "Desabilita a interação com o componente." }, { "name": "bg-color", "fieldName": "bgColor", "default": "'#DBE8FB'", "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." }, { "name": "status", "fieldName": "status", "default": "false", "description": "Exibe um indicador de status no avatar." }, { "name": "status-bg-color", "fieldName": "statusBgColor", "default": "'rgb(22, 136, 33)'", "description": "Cor de fundo do indicador de status padrão." }, { "name": "status-label", "fieldName": "statusLabel", "default": "'Status do usuário'", "description": "Rótulo acessível do indicador de status padrão." }, { "name": "status-size", "fieldName": "statusSize", "default": "'12px'", "description": "Tamanho do indicador de status padrão." }, { "name": "status-position", "fieldName": "statusPosition", "default": "'top-right'", "description": "Posição do indicador de status sobre o avatar. Aceita `top-right`, `bottom-right`, `top-left` ou `bottom-left`.\nValores inválidos usam `top-right`.", "type": { "text": "AvatarStatusPosition" }, "parsedType": { "text": "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'" } } ], "tagName": "br-avatar", "status": "stable", "csspart": [ { "name": "container", "description": "Elemento externo do avatar." }, { "name": "content", "description": "Conteúdo interno do avatar (imagem, ícone ou texto)." }, { "name": "status", "description": "Indicador de status posicionado sobre o avatar." } ], "events": [], "customElement": true, "category": "Identidade", "categories": [ "Identidade", "Conteúdo" ] } ], "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": "O `br-breadcrumb` mostra o caminho até a página atual e permite voltar aos níveis anteriores.\n\n### Como montar\n\n1. Declare um `br-breadcrumb-item` para cada nível, do início até a página atual.\n2. Use `home` no primeiro item para exibir o ícone de página inicial.\n3. Marque a página atual com `active`: ela aparece sem link e com `aria-current=\"page\"`.\n\n```html\n\n \n \n \n\n```\n\nOs mesmos itens podem ser passados em `crumbs`, como array ou texto JSON. Quando falta espaço, os níveis intermediários são agrupados; `truncate-after` define a partir de quantos itens isso acontece.\n\n### Navegação em SPA\n\nCom `navigation-mode=\"event\"`, o clique em um item emite `brNavigate`. Cancele o evento e passe o endereço para o roteador:\n\n```js\nbreadcrumb.addEventListener('brNavigate', (event) => {\n event.preventDefault();\n router.push(event.detail.href);\n});\n```\n\n### Quando usar\n\n- Páginas com dois ou mais níveis de hierarquia.\n\n### Quando evitar\n\n- Navegação sem hierarquia.\n- Etapas de um processo: use `br-wizard` ou `br-step`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/breadcrumb?tab=designer).", "name": "Breadcrumb", "cssParts": [ { "description": "Elemento nav do breadcrumb.", "name": "nav" }, { "description": "Lista ordenada de itens do breadcrumb.", "name": "list" } ], "slots": [ { "description": "Itens de breadcrumb declarados via elementos br-breadcrumb-item. O elemento br-crumb é aceito apenas por compatibilidade.", "name": "default" } ], "members": [ { "kind": "field", "name": "el", "type": { "text": "HTMLBrBreadcrumbElement" } }, { "kind": "field", "name": "contentWidth", "type": { "text": "number" }, "default": "0", "description": "Largura interna dos itens do breadcrumb." }, { "kind": "field", "name": "innerCrumbs", "type": { "text": "BreadcrumbItem[]" }, "default": "[]", "description": "Lista interna de itens normalizados usada na renderização 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": "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": "parentWidth", "type": { "text": "number" }, "default": "0", "description": "Largura do container pai do breadcrumb." }, { "kind": "field", "name": "showTooltip", "type": { "text": "boolean" }, "default": "false", "description": "Define o estado oculto ou visível do tooltip." }, { "kind": "field", "name": "tooltipText", "type": { "text": "string" }, "default": "''", "description": "Define o posicionamento do tooltip na tela." }, { "kind": "field", "name": "customId", "type": { "text": "string" }, "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId()." }, { "kind": "field", "name": "homeUrl", "type": { "text": "string" }, "default": "'/'", "description": "Caso não seja fornecido, o valor padrão será /.", "deprecated": "Use `homeHref`." }, { "kind": "field", "name": "homeHref", "type": { "text": "string | undefined" }, "description": "URL padrão da página inicial. Quando informada, tem precedência sobre `homeUrl`.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "truncateAfter", "type": { "text": "number | undefined" }, "description": "Quantidade máxima de crumbs exibidos antes de ativar o modo truncado.\nQuando omitida, o truncamento continua sendo decidido apenas pelo espaço disponível.\nValores inválidos são ignorados.", "parsedType": { "text": "number" } }, { "kind": "field", "name": "crumbs", "type": { "text": "string | BreadcrumbItem[]" }, "description": "Fornece os nomes e links do breadcrumb.\nUse uma string JSON no atributo HTML ou um array de `BreadcrumbItem` por property binding.\nCada item deve ter `label` string e pode ter `href`, `target`, `home` e `active`.\nItens inválidos são ignorados; se nenhum item válido restar, usa `defaultCrumbs` e avisa no console.", "parsedType": { "text": "string | { label: string, href: string, target: '_blank' | '_self' | '_parent' | '_top', home: boolean, active: boolean }[]" }, "example": "```js\nconst breadcrumb = document.querySelector('br-breadcrumb');\nbreadcrumb.crumbs = [\n { label: 'Início', href: '/' },\n { label: 'Serviço', active: true },\n];\n```" }, { "kind": "field", "name": "navigationMode", "type": { "text": "BrNavigationMode" }, "default": "'native'", "description": "Controla como os links do breadcrumb integram a navegação mantendo `href` real nos itens navegáveis.\n- `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir.\nCliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos.\nValores inválidos usam `native`.", "parsedType": { "text": "'native' | 'event'" } }, { "kind": "field", "name": "effectiveNavigationMode", "type": { "text": "BrNavigationMode" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'native' | 'event'" } }, { "kind": "method", "name": "handleCrumbPropsChange" }, { "kind": "field", "name": "slotElement", "type": { "text": "HTMLSlotElement" }, "privacy": "private" }, { "kind": "field", "name": "hasLoaded", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "defaultCrumbs", "type": { "text": "BreadcrumbItem[]" }, "privacy": "private", "default": "[ { label: 'Página 01', href: '/pagina-01' }, { label: 'Página 02', href: '/pagina-02' }, { label: 'Página Atual', active: true }, ]" }, { "kind": "field", "name": "floatingManager", "type": { "text": "FloatingUIManager | undefined" }, "privacy": "private" }, { "kind": "field", "name": "hoveredElement", "type": { "text": "HTMLElement | undefined" }, "privacy": "private" }, { "kind": "field", "name": "tooltipElement", "type": { "text": "HTMLDivElement | undefined" }, "privacy": "private" }, { "kind": "field", "name": "tooltipArrowElement", "type": { "text": "HTMLDivElement | undefined" }, "privacy": "private" }, { "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": "widthCalculationFrame", "type": { "text": "number | null" }, "privacy": "private", "default": "null", "parsedType": { "text": "number" } }, { "kind": "field", "name": "crumbKeys", "privacy": "private", "readonly": true, "default": "new WeakMap()" }, { "kind": "field", "name": "crumbKeySequence", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "effectiveHomeHref", "type": { "text": "string" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "effectiveTruncateAfter", "type": { "text": "number | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "number" } }, { "kind": "field", "name": "shouldTruncateByCount", "type": { "text": "boolean" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "shouldRenderTruncated", "type": { "text": "boolean" }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "normalizeTarget", "privacy": "private", "return": { "type": { "text": "BreadcrumbTarget | undefined" } }, "parameters": [ { "name": "target", "optional": true, "type": { "text": "string | null" } } ] }, { "kind": "field", "name": "registerCrumbItems", "privacy": "private" }, { "kind": "method", "name": "truncateText", "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 'truncateCharactersLimit'." }, { "kind": "method", "name": "isTruncatedLabel", "privacy": "private", "parameters": [ { "name": "text", "type": { "text": "string" } } ] }, { "kind": "method", "name": "handleMouseOver", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent | FocusEvent" } }, { "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": "field", "name": "handleNavigation", "privacy": "private" }, { "kind": "method", "name": "positionTooltip", "privacy": "private" }, { "kind": "method", "name": "cleanupTooltipPosition", "privacy": "private" }, { "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": "getCrumbKey", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "item", "type": { "text": "object" } } ] }, { "kind": "method", "name": "handleHomeClick", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ], "description": "Ao clicar no botão HOME, direciona o usuário para a URL configurada." }, { "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": "CssClassMap" } }, "description": "Define as classes CSS usadas no breadcrumb." }, { "kind": "field", "name": "updateContainerSize", "privacy": "private", "description": "Atualiza os estados de largura do breadcrumb ao detectar mudanças no container pai." }, { "kind": "method", "name": "calculateItemsWidth", "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": "renderCollapsedBreadcrumbItems", "privacy": "private", "parameters": [ { "name": "parsedItems", "type": { "text": "BreadcrumbItem[]" } } ] }, { "kind": "method", "name": "renderDesktopBreadcrumbItems", "privacy": "private", "parameters": [ { "name": "parsedItems", "type": { "text": "BreadcrumbItem[]" } } ] }, { "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": "shouldSkipFloatingListItem", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "index", "type": { "text": "number" } }, { "name": "totalItems", "type": { "text": "number" } } ] }, { "kind": "method", "name": "getListItemAriaLabel", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "index", "type": { "text": "number" } }, { "name": "totalItems", "type": { "text": "number" } } ] }, { "kind": "method", "name": "getListItemKeyDownHandler", "privacy": "private", "description": "Com o roving tabindex de `br-list` (apenas um item por vez alcançável via Tab),\no item de onde o usuário sai da lista via Tab pode ser qualquer um -- não mais\nnecessariamente o de índice `totalItems - 3` como antes, quando todo item era\num tab stop nativo e Tab sempre percorria a lista em ordem sequencial. Por isso\no handler de saída é anexado a todo item; `handleKeyDownOut` já valida internamente\nse a saída deve de fato ocorrer (`isFolderOpen && shouldRenderTruncated && !isSmallScreen`)." }, { "kind": "method", "name": "renderBreadcrumbListItem", "privacy": "private", "parameters": [ { "name": "item", "type": { "text": "BreadcrumbItem" } }, { "name": "index", "type": { "text": "number" } }, { "name": "totalItems", "type": { "text": "number" } } ] }, { "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", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "type": { "text": "string" } }, { "name": "home-url", "fieldName": "homeUrl", "default": "'/'", "description": "Caso não seja fornecido, o valor padrão será /." }, { "name": "home-href", "fieldName": "homeHref", "description": "URL padrão da página inicial. Quando informada, tem precedência sobre `homeUrl`.", "type": { "text": "string" } }, { "name": "truncate-after", "fieldName": "truncateAfter", "description": "Quantidade máxima de crumbs exibidos antes de ativar o modo truncado.\nQuando omitida, o truncamento continua sendo decidido apenas pelo espaço disponível.\nValores inválidos são ignorados.", "type": { "text": "number" } }, { "name": "crumbs", "fieldName": "crumbs", "description": "Fornece os nomes e links do breadcrumb.\nUse uma string JSON no atributo HTML ou um array de `BreadcrumbItem` por property binding.\nCada item deve ter `label` string e pode ter `href`, `target`, `home` e `active`.\nItens inválidos são ignorados; se nenhum item válido restar, usa `defaultCrumbs` e avisa no console.", "type": { "text": "string | BreadcrumbItem[]" }, "parsedType": { "text": "string | { label: string, href: string, target: '_blank' | '_self' | '_parent' | '_top', home: boolean, active: boolean }[]" } }, { "name": "navigation-mode", "fieldName": "navigationMode", "default": "'native'", "description": "Controla como os links do breadcrumb integram a navegação mantendo `href` real nos itens navegáveis.\n- `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir.\nCliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos.\nValores inválidos usam `native`.", "type": { "text": "BrNavigationMode" }, "parsedType": { "text": "'native' | 'event'" } } ], "tagName": "br-breadcrumb", "status": "stable", "csspart": [ { "name": "nav", "description": "Elemento nav do breadcrumb." }, { "name": "list", "description": "Lista ordenada de itens do breadcrumb." } ], "events": [ { "name": "brNavigate", "type": { "text": "EventEmitter" }, "description": "Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA." } ], "customElement": true, "category": "Navegação", "categories": [ "Navegação" ] } ], "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/breadcrumb-item/breadcrumb-item.js", "declarations": [ { "kind": "class", "description": "Representa um nível do `br-breadcrumb`. Use somente dentro dele.\n\nInforme `label` e `href`. Use `home` no primeiro item e `active` na página atual. O conteúdo do item, quando houver, substitui o texto de `label`.\n\nVeja como montar a trilha na documentação do `br-breadcrumb`.", "name": "BreadcrumbItem", "slots": [ { "description": "Conteúdo alternativo do rótulo. Quando usado, substitui o texto fornecido em `label`.", "name": "default" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "Rótulo do item." }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "URL do item.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Contexto de navegação.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "home", "type": { "text": "boolean" }, "default": "false", "description": "Identifica o item inicial." }, { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Identifica a página atual." }, { "kind": "method", "name": "handlePropsChange" }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "label", "fieldName": "label", "default": "''", "description": "Rótulo do item." }, { "name": "href", "fieldName": "href", "description": "URL do item.", "type": { "text": "string" } }, { "name": "target", "fieldName": "target", "description": "Contexto de navegação.", "type": { "text": "string" } }, { "name": "home", "fieldName": "home", "default": "false", "description": "Identifica o item inicial." }, { "name": "active", "fieldName": "active", "default": "false", "description": "Identifica a página atual." } ], "tagName": "br-breadcrumb-item", "events": [ { "name": "brCrumbPropsChange", "type": { "text": "EventEmitter" }, "description": "Protocolo compatível com o listener atual do breadcrumb." } ], "customElement": true, "category": "Interno", "categories": [], "status": "stable" } ], "exports": [ { "kind": "js", "name": "BreadcrumbItem", "declaration": { "name": "BreadcrumbItem", "module": "components/breadcrumb-item/breadcrumb-item.js" } }, { "kind": "custom-element-definition", "name": "br-breadcrumb-item", "declaration": { "name": "BreadcrumbItem", "module": "components/breadcrumb-item/breadcrumb-item.js" } } ] }, { "kind": "javascript-module", "path": "components/crumb/crumb.js", "declarations": [ { "kind": "class", "description": "Nome antigo do `br-breadcrumb-item`, mantido para compatibilidade. Funciona da mesma forma; em código novo, use `br-breadcrumb-item`.", "name": "Crumb", "slots": [ { "description": "Conteúdo alternativo do rótulo do item de navegação.", "name": "default" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "Rótulo (texto) do crumb." }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "URL ou caminho para o qual o usuário será direcionado ao clicar no crumb.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Define o alvo do link quando `href` está presente. (ex: _blank, _self).", "parsedType": { "text": "string" } }, { "kind": "field", "name": "home", "type": { "text": "boolean" }, "default": "false", "description": "Define se o crumb é o item inicial (Home)." }, { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Define se o crumb é a página atual ativa no breadcrumb." }, { "kind": "method", "name": "handlePropsChange" }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "label", "fieldName": "label", "default": "''", "description": "Rótulo (texto) do crumb." }, { "name": "href", "fieldName": "href", "description": "URL ou caminho para o qual o usuário será direcionado ao clicar no crumb.", "type": { "text": "string" } }, { "name": "target", "fieldName": "target", "description": "Define o alvo do link quando `href` está presente. (ex: _blank, _self).", "type": { "text": "string" } }, { "name": "home", "fieldName": "home", "default": "false", "description": "Define se o crumb é o item inicial (Home)." }, { "name": "active", "fieldName": "active", "default": "false", "description": "Define se o crumb é a página atual ativa no breadcrumb." } ], "deprecated": "Use `br-breadcrumb-item`.", "tagName": "br-crumb", "status": "deprecated", "see": [ "br-breadcrumb-item" ], "events": [ { "name": "brCrumbPropsChange", "type": { "text": "EventEmitter" }, "description": "Evento disparado quando as propriedades do crumb mudam.\nO componente pai (br-breadcrumb) escuta este evento para se atualizar." } ], "customElement": true, "category": "Navegação", "categories": [ "Navegação" ] } ], "exports": [ { "kind": "js", "name": "Crumb", "declaration": { "name": "Crumb", "module": "components/crumb/crumb.js" } }, { "kind": "custom-element-definition", "name": "br-crumb", "declaration": { "name": "Crumb", "module": "components/crumb/crumb.js" } } ] }, { "kind": "javascript-module", "path": "components/button.js", "declarations": [ { "kind": "class", "description": "O `br-button` executa uma ação: salvar, enviar um formulário, abrir um modal, aplicar um filtro.\n\nO texto e o ícone vão dentro do botão. A aparência é definida por `emphasis` (`primary`, `secondary` ou `tertiary`) e `shape` (`circle`, `block` ou `pill`).\n\n```html\nEnviar\n\n\n \n\n```\n\nO tipo padrão é `button`. Use `type=\"submit\"` ou `type=\"reset\"` para agir sobre o formulário em que o botão está. Durante uma operação demorada, ative `loading`.\n\n### Quando usar\n\n- Executar uma ação na página atual.\n- Abrir modal, menu ou painel.\n\n### Quando evitar\n\n- Para ir a outra página: use `br-link` ou ``.\n- Para escolher entre opções: use `br-radio` ou `br-checkbox`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/button?tab=designer).", "name": "Button", "cssParts": [ { "description": "Parte para o elemento button interno, usada para estilos customizados via ::part(button).", "name": "button" } ], "slots": [ { "description": "Slot para o rótulo ou conteúdo do botão.", "name": "default" } ], "members": [ { "kind": "field", "name": "elementInternals", "type": { "text": "ElementInternals" } }, { "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": "formDisabled", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "nativeButton", "type": { "text": "HTMLButtonElement | undefined" }, "privacy": "private" }, { "kind": "method", "name": "formDisabledCallback", "parameters": [ { "name": "disabled", "type": { "text": "boolean" } } ] }, { "kind": "field", "name": "colorMode", "type": { "text": "ButtonColorMode | undefined" }, "description": "Define se o botão usará um esquema de cores escuro. Valores inválidos são ignorados.", "parsedType": { "text": "'dark'" } }, { "kind": "field", "name": "customId", "type": { "text": "string" }, "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId()." }, { "kind": "field", "name": "density", "type": { "text": "ButtonDensity" }, "default": "'medium'", "description": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).\n- `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espaçamento e altura).\n\nValores inválidos usam `medium`.", "parsedType": { "text": "'small' | 'medium' | 'large'" } }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Desabilita a interação com o componente." }, { "kind": "field", "name": "emphasis", "type": { "text": "ButtonEmphasis | undefined" }, "description": "Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes. Valores inválidos são ignorados.", "parsedType": { "text": "'primary' | 'secondary' | 'tertiary'" } }, { "kind": "field", "name": "isActive", "type": { "text": "boolean" }, "default": "false", "description": "Indica se o botão está no estado ativo.\nSe definido como verdadeiro, o botão será exibido como ativo.", "deprecated": "Use `active`." }, { "kind": "field", "name": "active", "type": { "text": "boolean | undefined" }, "description": "Estado ativo atual. Quando informado, tem precedência sobre `isActive`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "isLoading", "type": { "text": "boolean" }, "default": "false", "description": "Aplica o estado de \"progresso\" ao botão.\nO botão exibirá um indicador de carregamento ou progresso.", "deprecated": "Use `loading`." }, { "kind": "field", "name": "loading", "type": { "text": "boolean | undefined" }, "description": "Estado de carregamento atual. Quando informado, tem precedência sobre `isLoading`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "shape", "type": { "text": "ButtonShape | undefined" }, "description": "Define o formato do botão. Valores inválidos são ignorados.", "parsedType": { "text": "'circle' | 'block' | 'pill'" } }, { "kind": "field", "name": "type", "type": { "text": "ButtonType | undefined" }, "description": "Define o tipo de botão, especificando seu comportamento padrão.\nQuando omitido, usa `button`; valores inválidos também usam `button` e geram aviso no console.", "parsedType": { "text": "'button' | 'submit' | 'reset'" } }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Define o valor inicial do botão em um formulário.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "customTabIndex", "type": { "text": "number | undefined" }, "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.\nAceita inteiros maiores ou iguais a -1; valores inválidos são ignorados.", "deprecated": "Use o atributo/propriedade nativo `tabIndex` do host.", "parsedType": { "text": "number" } }, { "kind": "field", "name": "effectiveCustomTabIndex", "type": { "text": "number | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "number" } }, { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "readonly": true, "default": "null", "description": "Define o rótulo acessível usado por tecnologias assistivas.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "ariaPressed", "type": { "text": "string | null" }, "readonly": true, "default": "null", "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'.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "ariaExpanded", "type": { "text": "string | null" }, "readonly": true, "default": "null", "description": "Indica se um elemento controlado pelo botão está expandido ou recolhido.\nUse em botões que abrem menus, acordeões ou outros painéis expansíveis.\nO valor deve ser 'true' ou 'false'.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "ariaControls", "type": { "text": "string | null" }, "readonly": true, "default": "null", "description": "Referência ao ID do elemento que o botão controla.\nUse em conjunto com `ariaExpanded` para relacionar o botão ao painel que ele expande/recolhe.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "ariaHaspopup", "type": { "text": "AriaHasPopup | null" }, "readonly": true, "default": "null", "description": "Indica que o botão abre um menu, listbox, tree, grid ou dialog.\nOs valores permitidos são: 'true', 'menu', 'listbox', 'tree', 'grid' ou 'dialog'.\nValores inválidos são removidos do elemento interno.", "parsedType": { "text": "'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'" } }, { "kind": "field", "name": "handleClick", "privacy": "private" }, { "kind": "method", "name": "getCssClassMap", "privacy": "private", "return": { "type": { "text": "CssClassMap" } } }, { "kind": "field", "name": "effectiveColorMode", "type": { "text": "ButtonColorMode | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'dark'" } }, { "kind": "field", "name": "effectiveEmphasis", "type": { "text": "ButtonEmphasis | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'primary' | 'secondary' | 'tertiary'" } }, { "kind": "field", "name": "effectiveShape", "type": { "text": "ButtonShape | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'circle' | 'block' | 'pill'" } }, { "kind": "field", "name": "effectiveType", "type": { "text": "ButtonType" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'button' | 'submit' | 'reset'" } }, { "kind": "field", "name": "effectiveAriaHaspopup", "type": { "text": "AriaHasPopup | null" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'" } }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "color-mode", "fieldName": "colorMode", "description": "Define se o botão usará um esquema de cores escuro. Valores inválidos são ignorados.", "type": { "text": "ButtonColorMode" }, "parsedType": { "text": "'dark'" } }, { "name": "custom-id", "fieldName": "customId", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "type": { "text": "string" } }, { "name": "density", "fieldName": "density", "default": "'medium'", "description": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).\n- `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espaçamento e altura).\n\nValores inválidos usam `medium`.", "type": { "text": "ButtonDensity" }, "parsedType": { "text": "'small' | 'medium' | 'large'" } }, { "name": "disabled", "fieldName": "disabled", "default": "false", "description": "Desabilita a interação com o componente." }, { "name": "emphasis", "fieldName": "emphasis", "description": "Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes. Valores inválidos são ignorados.", "type": { "text": "ButtonEmphasis" }, "parsedType": { "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." }, { "name": "active", "fieldName": "active", "description": "Estado ativo atual. Quando informado, tem precedência sobre `isActive`.", "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." }, { "name": "loading", "fieldName": "loading", "description": "Estado de carregamento atual. Quando informado, tem precedência sobre `isLoading`.", "type": { "text": "boolean" } }, { "name": "shape", "fieldName": "shape", "description": "Define o formato do botão. Valores inválidos são ignorados.", "type": { "text": "ButtonShape" }, "parsedType": { "text": "'circle' | 'block' | 'pill'" } }, { "name": "type", "fieldName": "type", "description": "Define o tipo de botão, especificando seu comportamento padrão.\nQuando omitido, usa `button`; valores inválidos também usam `button` e geram aviso no console.", "type": { "text": "ButtonType" }, "parsedType": { "text": "'button' | 'submit' | 'reset'" } }, { "name": "value", "fieldName": "value", "description": "Define o valor inicial do botão em um formulário.", "type": { "text": "string" } }, { "name": "custom-tab-index", "fieldName": "customTabIndex", "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.\nAceita inteiros maiores ou iguais a -1; valores inválidos são ignorados.", "type": { "text": "number" } }, { "name": "aria-label", "fieldName": "ariaLabel", "default": "null", "description": "Define o rótulo acessível usado por tecnologias assistivas.", "type": { "text": "string | null" }, "parsedType": { "text": "string" } }, { "name": "aria-pressed", "fieldName": "ariaPressed", "default": "null", "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 | null" }, "parsedType": { "text": "string" } }, { "name": "aria-expanded", "fieldName": "ariaExpanded", "default": "null", "description": "Indica se um elemento controlado pelo botão está expandido ou recolhido.\nUse em botões que abrem menus, acordeões ou outros painéis expansíveis.\nO valor deve ser 'true' ou 'false'.", "type": { "text": "string | null" }, "parsedType": { "text": "string" } }, { "name": "aria-controls", "fieldName": "ariaControls", "default": "null", "description": "Referência ao ID do elemento que o botão controla.\nUse em conjunto com `ariaExpanded` para relacionar o botão ao painel que ele expande/recolhe.", "type": { "text": "string | null" }, "parsedType": { "text": "string" } }, { "name": "aria-haspopup", "fieldName": "ariaHaspopup", "default": "null", "description": "Indica que o botão abre um menu, listbox, tree, grid ou dialog.\nOs valores permitidos são: 'true', 'menu', 'listbox', 'tree', 'grid' ou 'dialog'.\nValores inválidos são removidos do elemento interno.", "type": { "text": "AriaHasPopup | null" }, "parsedType": { "text": "'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'" } } ], "tagName": "br-button", "status": "stable", "csspart": { "name": "button", "description": "Parte para o elemento button interno, usada para estilos customizados via ::part(button)." }, "events": [], "customElement": true, "category": "Ações", "categories": [ "Ações", "Formulários" ] } ], "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 `br-card` agrupa conteúdos sobre um mesmo assunto em um bloco destacado, como um serviço, uma notícia ou um resultado de busca.\n\nOrganize o conteúdo nos slots `media`, `header`, `content` e `footer`, ou coloque tudo no slot padrão.\n\n```html\n\n \"\"\n

Carteira de Trabalho Digital

\n

Consulte seus vínculos de emprego.

\n Acessar\n\n```\n\nUse `interactive` quando o card inteiro for clicável, para dar o retorno visual ao passar o mouse.\n\n### Quando usar\n\n- Blocos independentes exibidos em grade ou lista.\n- Conteúdo que combina imagem, título, texto e ações.\n\n### Quando evitar\n\n- Dados para comparar em linhas e colunas: use `br-table`.\n- Uma lista simples de textos ou links: use `br-list`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/card?tab=designer).", "name": "BrCard", "cssParts": [ { "description": "Área principal do card.", "name": "wrapper" }, { "description": "Área de mídia do card.", "name": "media" }, { "description": "Área do cabeçalho.", "name": "header" }, { "description": "Área do conteúdo principal.", "name": "content" }, { "description": "Área do rodapé.", "name": "footer" } ], "slots": [ { "description": "Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.", "name": "default" }, { "description": "Slot para conteúdo de mídia exibido antes do cabeçalho.", "name": "media" }, { "description": "Slot para o conteúdo do cabeçalho do card.", "name": "header" }, { "description": "Slot para o corpo principal do card ao usar a estrutura de slots.", "name": "content" }, { "description": "Slot para o 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": "customId", "type": { "text": "string" }, "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId()." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Desabilita a interação com o componente." }, { "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.", "deprecated": "Use `interactive`." }, { "kind": "field", "name": "interactive", "type": { "text": "boolean | undefined" }, "description": "Habilita indicação visual de interatividade. Quando informada, tem precedência sobre `hover`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "hasMedia", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "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": "field", "name": "slotObserver", "type": { "text": "MutationObserver | undefined" }, "privacy": "private" }, { "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", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "default": "false", "description": "Desabilita a interação com o componente." }, { "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." }, { "name": "interactive", "fieldName": "interactive", "description": "Habilita indicação visual de interatividade. Quando informada, tem precedência sobre `hover`.", "type": { "text": "boolean" } } ], "tagName": "br-card", "status": "stable", "csspart": [ { "name": "wrapper", "description": "Área principal do card." }, { "name": "media", "description": "Área de mídia do card." }, { "name": "header", "description": "Área do cabeçalho." }, { "name": "content", "description": "Área do conteúdo principal." }, { "name": "footer", "description": "Área do rodapé." } ], "events": [], "customElement": true, "category": "Layout", "categories": [ "Layout", "Conteúdo" ] } ], "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/carousel.js", "declarations": [ { "kind": "class", "description": "O `br-carousel` mostra uma sequência de slides, um por vez, com botões de anterior e próximo e indicadores de posição.\n\nColoque cada slide em um `br-carousel-page` e dê um nome ao carrossel com `aria-label`.\n\n```html\n\n \n \"Campanha\n \n \n

Atualize seu cadastro até 30 de junho.

\n \n\n```\n\nPara ouvir a troca de slide, use `brCarouselPageChange`; `detail.activePage` começa em 1.\n\n### Quando usar\n\n- Imagens ou avisos com a mesma importância, em espaço limitado.\n\n### Quando evitar\n\n- Informação essencial para a tarefa: mostre tudo de uma vez, por exemplo em uma grade de `br-card`.\n- Etapas de um formulário: use `br-wizard` ou `br-step`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).", "name": "Carousel", "cssParts": [ { "description": "Elemento raiz do carrossel. Recebe `role=\"region\"` e `aria-roledescription=\"carousel\"`.", "name": "container" }, { "description": "Área do palco que contém os slides. Recebe `aria-live` e `aria-atomic`.", "name": "stage" }, { "description": "Wrapper do botão de navegação para o slide anterior.", "name": "nav-prev" }, { "description": "Wrapper do botão de navegação para o próximo slide.", "name": "nav-next" }, { "description": "Wrapper do indicador de páginas. - Quando `indicatorType=\"simple\"`: renderiza `br-step` em `mode=\"tablist\"`. - Quando `indicatorType=\"textual\"`: renderiza um `span[aria-live]` com \"X/N\".", "name": "indicator" }, { "description": "Wrapper do botão de play/pause. Presente apenas quando `autoPlay=true`.", "name": "play-button" } ], "slots": [ { "description": "Slot para os slides do carrossel. Aceita exclusivamente elementos `br-carousel-page`.", "name": "default" } ], "members": [ { "kind": "field", "name": "el", "type": { "text": "HTMLElement" }, "description": "Referência ao elemento host do componente." }, { "kind": "field", "name": "activePage", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "isPlaying", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "isRotating", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "`true` somente enquanto o timer de autoPlay está ativamente disparando.\nDifere de `isPlaying`: ao pausar por hover/foco, `isPlaying` permanece `true`\nmas `isRotating` torna-se `false`, liberando o `aria-live` para anunciar\nmudanças manuais de slide ao leitor de tela." }, { "kind": "field", "name": "pages", "type": { "text": "HTMLBrCarouselPageElement[]" }, "privacy": "private", "default": "[]", "description": "Lista de slides. Declarada como" }, { "kind": "field", "name": "customId", "type": { "text": "string" }, "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId()." }, { "kind": "field", "name": "ariaLabel", "type": { "text": "string" }, "readonly": true, "description": "Rótulo acessível do carrossel.\nNão deve conter a palavra \"carrossel\" (W3C APG).\nAtribuído ao `aria-label` do container raiz." }, { "kind": "field", "name": "navPosition", "type": { "text": "CarouselNavPosition" }, "readonly": true, "default": "'outside'", "description": "Posição dos botões de navegação (prev/next) em relação ao palco.\n- `outside`: botões ficam nas laterais externas ao palco.\n- `inside`: botões ficam sobrepostos dentro do palco, ocupando toda a altura.", "parsedType": { "text": "'outside' | 'inside'" } }, { "kind": "field", "name": "indicatorType", "type": { "text": "CarouselIndicatorType" }, "readonly": true, "default": "'simple'", "description": "Define o tipo de indicador de páginas renderizado.\n- `simple`: dots usando `br-step` em modo controller.\n- `textual`: texto \"X/N\" com `aria-live`.\n- `none`: sem indicador.", "parsedType": { "text": "'simple' | 'textual' | 'none'" } }, { "kind": "field", "name": "indicatorPosition", "type": { "text": "CarouselIndicatorPosition" }, "readonly": true, "default": "'outside'", "description": "Posição do indicador de páginas em relação ao palco.\nIgnorada quando `indicatorType=\"none\"`.\n- `outside`: indicador fica abaixo do palco.\n- `inside`: indicador fica sobreposto ao conteúdo.", "parsedType": { "text": "'outside' | 'inside'" } }, { "kind": "field", "name": "isCircular", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Habilita a navegação circular entre os slides.\nQuando true, os botões \"Anterior\" e \"Próximo\" permanecem sempre habilitados: avançar a partir do último slide retorna ao primeiro, e retroceder a partir do primeiro leva ao último.\nSe autoPlay estiver ativado, o comportamento circular será aplicado automaticamente, independentemente deste valor.", "deprecated": "Use `circular`." }, { "kind": "field", "name": "circular", "type": { "text": "boolean | undefined" }, "readonly": true, "description": "Habilita navegação circular. Quando informada, tem precedência sobre `isCircular`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "autoPlay", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Habilita reprodução automática.\nPausa em hover e foco (W3C). Ativa o loop circular automaticamente.\nNão recomendado em dispositivos móveis.", "deprecated": "Use `autoplay`." }, { "kind": "field", "name": "autoplay", "type": { "text": "boolean | undefined" }, "readonly": true, "description": "Habilita reprodução automática. Quando informada, tem precedência sobre `autoPlay`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "interval", "type": { "text": "number" }, "readonly": true, "default": "5000", "description": "Intervalo em milissegundos entre cada avanço automático.\nDeve ser um inteiro maior que 0; valores inválidos usam `5000`.\nSó tem efeito quando `autoPlay=true`." }, { "kind": "field", "name": "direction", "type": { "text": "CarouselDirection" }, "readonly": true, "default": "'right'", "description": "Direção de navegação automática do carrossel.\n- `left`: retrocede (vai para o slide anterior).\n- `right`: avança (vai para o próximo slide).\nSó tem efeito quando `autoPlay=true`.", "parsedType": { "text": "'left' | 'right'" } }, { "kind": "field", "name": "colorMode", "type": { "text": "CarouselColorMode" }, "readonly": true, "description": "Aplica esquema de cores escuro ao componente.", "parsedType": { "text": "'dark'" } }, { "kind": "field", "name": "mobileNav", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Exibe botões de navegação em dispositivos móveis.\nPor padrão os botões são ocultados no breakpoint `sm`." }, { "kind": "field", "name": "minHeight", "type": { "text": "string" }, "readonly": true, "description": "Altura mínima do palco do carrossel.\nAceita qualquer valor CSS válido para `min-height` (ex.: `400px`, `50vh`)." }, { "kind": "field", "name": "height", "type": { "text": "string" }, "readonly": true, "description": "Altura do carrossel.\nAceita qualquer valor CSS válido para `height` (ex.: `400px`, `50vh`)." }, { "kind": "field", "name": "maxWidth", "type": { "text": "string" }, "readonly": true, "description": "Largura máxima do carrossel.\nQuando definido, o componente é centralizado horizontalmente.\nAceita qualquer valor CSS válido para `max-width` (ex.: `800px`, `64rem`)." }, { "kind": "field", "name": "imageFit", "type": { "text": "CarouselImageFit" }, "readonly": true, "default": "'cover'", "description": "Ajuste aplicado a imagens filhas diretas de `br-carousel-page`.", "parsedType": { "text": "'none' | 'contain' | 'cover' | 'fill' | 'scale-down'" } }, { "kind": "field", "name": "effectiveNavPosition", "type": { "text": "CarouselNavPosition" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'outside' | 'inside'" } }, { "kind": "field", "name": "effectiveIndicatorType", "type": { "text": "CarouselIndicatorType" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'simple' | 'textual' | 'none'" } }, { "kind": "field", "name": "effectiveIndicatorPosition", "type": { "text": "CarouselIndicatorPosition" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'outside' | 'inside'" } }, { "kind": "field", "name": "effectiveDirection", "type": { "text": "CarouselDirection" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'left' | 'right'" } }, { "kind": "field", "name": "effectiveColorMode", "type": { "text": "CarouselColorMode | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'dark'" } }, { "kind": "field", "name": "effectiveImageFit", "type": { "text": "CarouselImageFit" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'none' | 'contain' | 'cover' | 'fill' | 'scale-down'" } }, { "kind": "field", "name": "effectiveInterval", "type": { "text": "number" }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "onActivePageChange", "parameters": [ { "name": "newVal", "type": { "text": "number" } }, { "name": "oldVal", "type": { "text": "number" } } ] }, { "kind": "method", "name": "onTablistKeydown", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "description": "Navegação por teclado para o modo tablist (`indicatorType=\"simple\"`).\n\nO W3C APG Carousel Pattern especifica que, quando os controles de seleção de slide\nsão implementados como tabs, a interação de teclado segue o\nhttps://www.w3.org/WAI/ARIA/apg/patterns/tabs/ Tabs Pattern (W3C APG).\nEsse padrão define o comportamento de roving tabindex com as teclas:\n- `ArrowLeft` / `ArrowRight` (ou `ArrowUp` / `ArrowDown`): move o foco entre as tabs.\n- `Home`: move o foco para a primeira tab.\n- `End`: move o foco para a última tab.\n\nO handler está no `br-carousel` (e não no `br-step`) porque a lógica de\n`effectiveCircular` é uma responsabilidade do carrossel, mantendo uma única\nfonte de verdade para a navegação circular.\n\nO evento `keydown` é composto (`composed: true`), portanto borbulha através do\nshadow DOM do `br-step-item` até o host do `br-carousel`." }, { "kind": "method", "name": "nextPage", "return": { "type": { "text": "Promise" } }, "description": "Avança para o próximo slide. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`)." }, { "kind": "method", "name": "previousPage", "return": { "type": { "text": "Promise" } }, "description": "Retorna ao slide anterior. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`)." }, { "kind": "method", "name": "goToPage", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "index", "type": { "text": "number" } } ], "description": "Navega para o slide de número `index` (1 = primeiro slide, 2 = segundo, …).\nValores fora do intervalo válido são ignorados." }, { "kind": "method", "name": "getActivePage", "return": { "type": { "text": "Promise" } }, "description": "Retorna o número do slide atualmente ativo (1 = primeiro slide, 2 = segundo, …)." }, { "kind": "method", "name": "play", "return": { "type": { "text": "Promise" } }, "description": "Inicia ou retoma a reprodução automática programaticamente." }, { "kind": "method", "name": "pause", "return": { "type": { "text": "Promise" } }, "description": "Pausa a reprodução automática programaticamente." }, { "kind": "method", "name": "getIsPlaying", "return": { "type": { "text": "Promise" } }, "description": "Retorna `true` se a reprodução automática está ativa no momento." }, { "kind": "field", "name": "stepRef", "type": { "text": "HTMLBrStepElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "autoPlayTimer", "type": { "text": "ReturnType | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "isPausedByFocus", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "isHovering", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Rastreia se o cursor está sobre o carrossel (para evitar retomar ao sair do foco enquanto hover ativo)." }, { "kind": "field", "name": "isUserExplicitlyPlaying", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Quando true, o usuário iniciou explicitamente via botão — hover e foco não pausam a rotação." }, { "kind": "field", "name": "stageRef", "type": { "text": "HTMLElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "carouselSwipe", "type": { "text": "UniversalSwipe | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "slotEl", "type": { "text": "HTMLSlotElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "MOBILE_MQ", "type": { "text": "string" }, "privacy": "private", "readonly": true, "default": "'(max-width: 576px)'", "parsedType": { "text": "'(max-width: 576px)'" } }, { "kind": "field", "name": "mobileMediaQuery", "type": { "text": "MediaQueryList | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "reducedMotionMediaQuery", "type": { "text": "MediaQueryList | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "NAVIGATION_KEYS", "privacy": "private", "static": true, "readonly": true, "default": "new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'])" }, { "kind": "field", "name": "slideElements", "type": { "text": "HTMLBrCarouselPageElement[]" }, "privacy": "private", "description": "Retorna os slides atribuídos ao slot do carrossel.\n\nUsa `slot.assignedElements()` quando o slot já está disponível (após `componentDidLoad`):\na API retorna diretamente a lista interna do browser.\n\nRecorre a `querySelectorAll` apenas em `componentWillLoad`, quando o shadow DOM\nainda não foi renderizado e `slotEl` é `null`.", "readonly": true }, { "kind": "field", "name": "onSlotChange", "privacy": "private", "description": "Reatualiza a lista de slides e reinicializa os atributos quando o conteúdo\ndo slot muda (slides adicionados ou removidos dinamicamente)." }, { "kind": "field", "name": "onBreakpointChange", "type": { "text": "(e: MediaQueryListEvent) => void" }, "privacy": "private" }, { "kind": "field", "name": "onReducedMotionChange", "type": { "text": "(e: MediaQueryListEvent) => void" }, "privacy": "private" }, { "kind": "field", "name": "onReducedMotionOverrideChange", "privacy": "private" }, { "kind": "method", "name": "prefersReducedMotion", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "initAutoPlay", "privacy": "private" }, { "kind": "method", "name": "slideId", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "index", "type": { "text": "number" } } ], "description": "Retorna o ID único de um slide pelo índice (0-based).\nPrioriza o `customId` definido no próprio `br-carousel-page`, quando presente.\nCaso contrário, gera automaticamente no formato `{carousel-id}-slide-{n}`.\nUsado para vincular `controls-id` das tabs ao `id` do tabpanel correspondente." }, { "kind": "field", "name": "effectiveCircular", "type": { "text": "boolean" }, "privacy": "private", "description": "Circular efetivo: ativo quando `isCircular=true` OU quando `autoPlay=true`.\nUsar este getter em toda a lógica interna em vez de `this.isCircular` diretamente.", "readonly": true }, { "kind": "field", "name": "effectiveAutoplay", "type": { "text": "boolean" }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "positionSlides", "privacy": "private", "parameters": [ { "name": "activeIndex", "type": { "text": "number" } } ], "description": "Reposiciona todos os slides inativos com base no índice ativo.\nSlides após o ativo ficam à direita (100%), antes ficam à esquerda (-100%)." }, { "kind": "method", "name": "initPages", "privacy": "private" }, { "kind": "method", "name": "goTo", "privacy": "private", "parameters": [ { "name": "index", "type": { "text": "number" } } ] }, { "kind": "method", "name": "syncStepIndicator", "privacy": "private", "parameters": [ { "name": "newVal", "default": "this.activePage" }, { "name": "oldVal", "default": "null", "type": { "text": "number | null" } } ], "description": "Mantém o atributo `active` dos `br-step-item` filhos do `br-step` em sincronia\ncom o slide ativo. Recebe o novo e o antigo índice para otimizar a atualização (removendo o atributo apenas do item anterior, em vez de iterar por todos os itens).\nSe `oldVal` for `null`, atualiza todos os itens (caso de inicialização ou mudança completa de slides)." }, { "kind": "method", "name": "getDataStage", "privacy": "private", "return": { "type": { "text": "CarouselDataStage" } } }, { "kind": "method", "name": "scheduleInterval", "privacy": "private" }, { "kind": "method", "name": "clearTimer", "privacy": "private" }, { "kind": "field", "name": "isPrevDisabled", "type": { "text": "boolean" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "isNextDisabled", "type": { "text": "boolean" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "onMouseEnter", "privacy": "private", "description": "Handlers de eventos do DOM — mouse, foco e interação do usuário." }, { "kind": "field", "name": "onMouseLeave", "privacy": "private" }, { "kind": "field", "name": "onFocusIn", "privacy": "private" }, { "kind": "field", "name": "onFocusOut", "privacy": "private" }, { "kind": "field", "name": "onSwipeLeft", "privacy": "private", "description": "Swipe — configuração e limpeza de gestos touch/pointer em mobile." }, { "kind": "field", "name": "onSwipeRight", "privacy": "private" }, { "kind": "method", "name": "setupSwipeListeners", "privacy": "private" }, { "kind": "method", "name": "cleanupSwipeListeners", "privacy": "private" }, { "kind": "method", "name": "resolveTablistKeyIndex", "privacy": "private", "return": { "type": { "text": "number" } }, "parameters": [ { "name": "key", "type": { "text": "string" } } ], "description": "Calcula o índice alvo com base na tecla pressionada no modo tablist." }, { "kind": "method", "name": "focusStepItem", "privacy": "private", "parameters": [ { "name": "index", "type": { "text": "number" } } ], "description": "Move o foco para o `br-step-item` de índice `index`.\n\nEm modo tablist, a semântica ARIA (`role=\"tab\"`, `tabIndex`, `aria-selected`) é\naplicada diretamente no host do `br-step-item` — não no botão interno, que fica\ninerte. Por isso o foco vai para o próprio host, e o ring visual é controlado\nvia `:host(.role-tab:focus-visible)` no CSS do componente." }, { "kind": "field", "name": "onStepChange", "privacy": "private" }, { "kind": "field", "name": "onPrevClick", "privacy": "private" }, { "kind": "field", "name": "onNextClick", "privacy": "private" }, { "kind": "field", "name": "onPlayToggle", "privacy": "private" }, { "kind": "method", "name": "getCssClassMap", "privacy": "private", "return": { "type": { "text": "CssClassMap" } } }, { "kind": "method", "name": "getHostStyle", "privacy": "private" }, { "kind": "method", "name": "renderPlayButton", "privacy": "private" }, { "kind": "method", "name": "renderNavButton", "privacy": "private", "parameters": [ { "name": "direction", "type": { "text": "CarouselNavigationDirection" } } ] }, { "kind": "method", "name": "renderIndicator", "privacy": "private" }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "custom-id", "fieldName": "customId", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "type": { "text": "string" } }, { "name": "aria-label", "fieldName": "ariaLabel", "description": "Rótulo acessível do carrossel.\nNão deve conter a palavra \"carrossel\" (W3C APG).\nAtribuído ao `aria-label` do container raiz.", "type": { "text": "string" } }, { "name": "nav-position", "fieldName": "navPosition", "default": "'outside'", "description": "Posição dos botões de navegação (prev/next) em relação ao palco.\n- `outside`: botões ficam nas laterais externas ao palco.\n- `inside`: botões ficam sobrepostos dentro do palco, ocupando toda a altura.", "type": { "text": "CarouselNavPosition" }, "parsedType": { "text": "'outside' | 'inside'" } }, { "name": "indicator-type", "fieldName": "indicatorType", "default": "'simple'", "description": "Define o tipo de indicador de páginas renderizado.\n- `simple`: dots usando `br-step` em modo controller.\n- `textual`: texto \"X/N\" com `aria-live`.\n- `none`: sem indicador.", "type": { "text": "CarouselIndicatorType" }, "parsedType": { "text": "'simple' | 'textual' | 'none'" } }, { "name": "indicator-position", "fieldName": "indicatorPosition", "default": "'outside'", "description": "Posição do indicador de páginas em relação ao palco.\nIgnorada quando `indicatorType=\"none\"`.\n- `outside`: indicador fica abaixo do palco.\n- `inside`: indicador fica sobreposto ao conteúdo.", "type": { "text": "CarouselIndicatorPosition" }, "parsedType": { "text": "'outside' | 'inside'" } }, { "name": "is-circular", "fieldName": "isCircular", "default": "false", "description": "Habilita a navegação circular entre os slides.\nQuando true, os botões \"Anterior\" e \"Próximo\" permanecem sempre habilitados: avançar a partir do último slide retorna ao primeiro, e retroceder a partir do primeiro leva ao último.\nSe autoPlay estiver ativado, o comportamento circular será aplicado automaticamente, independentemente deste valor.", "type": { "text": "boolean" } }, { "name": "circular", "fieldName": "circular", "description": "Habilita navegação circular. Quando informada, tem precedência sobre `isCircular`.", "type": { "text": "boolean" } }, { "name": "auto-play", "fieldName": "autoPlay", "default": "false", "description": "Habilita reprodução automática.\nPausa em hover e foco (W3C). Ativa o loop circular automaticamente.\nNão recomendado em dispositivos móveis.", "type": { "text": "boolean" } }, { "name": "autoplay", "fieldName": "autoplay", "description": "Habilita reprodução automática. Quando informada, tem precedência sobre `autoPlay`.", "type": { "text": "boolean" } }, { "name": "interval", "fieldName": "interval", "default": "5000", "description": "Intervalo em milissegundos entre cada avanço automático.\nDeve ser um inteiro maior que 0; valores inválidos usam `5000`.\nSó tem efeito quando `autoPlay=true`.", "type": { "text": "number" } }, { "name": "direction", "fieldName": "direction", "default": "'right'", "description": "Direção de navegação automática do carrossel.\n- `left`: retrocede (vai para o slide anterior).\n- `right`: avança (vai para o próximo slide).\nSó tem efeito quando `autoPlay=true`.", "type": { "text": "CarouselDirection" }, "parsedType": { "text": "'left' | 'right'" } }, { "name": "color-mode", "fieldName": "colorMode", "description": "Aplica esquema de cores escuro ao componente.", "type": { "text": "CarouselColorMode" }, "parsedType": { "text": "'dark'" } }, { "name": "mobile-nav", "fieldName": "mobileNav", "default": "false", "description": "Exibe botões de navegação em dispositivos móveis.\nPor padrão os botões são ocultados no breakpoint `sm`.", "type": { "text": "boolean" } }, { "name": "min-height", "fieldName": "minHeight", "description": "Altura mínima do palco do carrossel.\nAceita qualquer valor CSS válido para `min-height` (ex.: `400px`, `50vh`).", "type": { "text": "string" } }, { "name": "height", "fieldName": "height", "description": "Altura do carrossel.\nAceita qualquer valor CSS válido para `height` (ex.: `400px`, `50vh`).", "type": { "text": "string" } }, { "name": "max-width", "fieldName": "maxWidth", "description": "Largura máxima do carrossel.\nQuando definido, o componente é centralizado horizontalmente.\nAceita qualquer valor CSS válido para `max-width` (ex.: `800px`, `64rem`).", "type": { "text": "string" } }, { "name": "image-fit", "fieldName": "imageFit", "default": "'cover'", "description": "Ajuste aplicado a imagens filhas diretas de `br-carousel-page`.", "type": { "text": "CarouselImageFit" }, "parsedType": { "text": "'none' | 'contain' | 'cover' | 'fill' | 'scale-down'" } } ], "tagName": "br-carousel", "status": "stable", "csspart": [ { "name": "container", "description": "Elemento raiz do carrossel. Recebe `role=\"region\"` e `aria-roledescription=\"carousel\"`." }, { "name": "stage", "description": "Área do palco que contém os slides. Recebe `aria-live` e `aria-atomic`." }, { "name": "nav-prev", "description": "Wrapper do botão de navegação para o slide anterior." }, { "name": "nav-next", "description": "Wrapper do botão de navegação para o próximo slide." }, { "name": "indicator", "description": "Wrapper do indicador de páginas. - Quando `indicatorType=\"simple\"`: renderiza `br-step` em `mode=\"tablist\"`. - Quando `indicatorType=\"textual\"`: renderiza um `span[aria-live]` com \"X/N\"." }, { "name": "play-button", "description": "Wrapper do botão de play/pause. Presente apenas quando `autoPlay=true`." } ], "events": [ { "name": "brDidPageChange", "type": { "text": "EventEmitter" }, "description": "Emitido quando o slide ativo muda.\nDisparado por clique nos botões de navegação, clique no indicador de step,\ngesto swipe (apenas em mobile, breakpoint < 576px) ou avanço automático.\n`activePage` é 1-based: o primeiro slide emite `1`, o segundo `2`, e assim por diante." }, { "name": "brCarouselPageChange", "type": { "text": "EventEmitter" }, "description": "Evento emitido quando o slide ativo muda." }, { "name": "brDidAutoPlayStart", "type": { "text": "EventEmitter" }, "description": "Emitido quando a reprodução automática é iniciada ou retomada." }, { "name": "brCarouselAutoplayStart", "type": { "text": "EventEmitter" }, "description": "Evento emitido quando a reprodução automática começa." }, { "name": "brDidAutoPlayPause", "type": { "text": "EventEmitter" }, "description": "Emitido quando a reprodução automática é pausada." }, { "name": "brCarouselAutoplayPause", "type": { "text": "EventEmitter" }, "description": "Evento emitido quando a reprodução automática é pausada." } ], "customElement": true, "category": "Conteúdo", "categories": [ "Conteúdo", "Navegação" ] } ], "exports": [ { "kind": "js", "name": "Carousel", "declaration": { "name": "Carousel", "module": "components/carousel.js" } }, { "kind": "custom-element-definition", "name": "br-carousel", "declaration": { "name": "Carousel", "module": "components/carousel.js" } } ] }, { "kind": "javascript-module", "path": "components/carousel-page/carousel-page.js", "declarations": [ { "kind": "class", "description": "Representa um slide do `br-carousel`. Use somente dentro dele.\n\nColoque no slide a imagem, o texto e as ações. Para começar em um slide que não seja o primeiro, marque-o com `active`; depois disso, o `br-carousel` controla o slide ativo.", "name": "CarouselPage", "cssParts": [ { "description": "Wrapper interno do conteúdo do slide.", "name": "content" } ], "slots": [ { "description": "Qualquer conteúdo: imagens, textos, cards, vídeos, outros componentes do Design System.", "name": "default" } ], "members": [ { "kind": "field", "name": "el", "type": { "text": "HTMLElement" }, "description": "Referência ao elemento host do componente." }, { "kind": "field", "name": "isActive", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "panelRole", "type": { "text": "'group' | 'tabpanel'" }, "privacy": "private", "default": "'group'", "description": "Role ARIA interna do slide.\n- `group`: padrão W3C para carrossel básico/agrupado.\n- `tabpanel`: definido automaticamente quando o pai `br-carousel`\n usa `indicatorType=\"simple\"`, conforme o padrão W3C.\nDerivado automaticamente de `indicator-type` do `br-carousel` pai.", "parsedType": { "text": "'group' | 'tabpanel'" } }, { "kind": "field", "name": "slideLabel", "type": { "text": "string | undefined" }, "privacy": "private", "parsedType": { "text": "string" } }, { "kind": "field", "name": "customId", "type": { "text": "string | undefined" }, "readonly": true, "description": "Identificador único customizável do slide.\nQuando definido, é aplicado diretamente ao atributo `id` do elemento host,\ngarantindo que referências ARIA externas, testes automatizados e âncoras funcionem corretamente.\nO `br-carousel` pai detecta este valor e usa-o também no `controls-id` do indicador de tabs,\nmantendo o vínculo ARIA entre tab e tabpanel automaticamente.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Marca este slide como visível e acessível.\nPode ser usado declarativamente no HTML para definir o slide inicial:\nEm runtime, o `br-carousel` pai gerencia o estado via `setActive()`." }, { "kind": "method", "name": "onActiveChange", "parameters": [ { "name": "newVal", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "setLabel", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "defaultLabel", "type": { "text": "string" }, "description": "Label de fallback gerado pelo `br-carousel` (ex: `\"Slide 2 de 4\"`)." } ], "description": "Define o label acessível (`aria-label`) do slide.\n\nChamado pelo `br-carousel` pai para aplicar o label gerado automaticamente\ncom base na posição do slide (ex: `\"Slide 1 de 3\"`).\n\nO `aria-label` declarado diretamente no elemento tem prioridade:\nse o consumidor definir `aria-label` no HTML ou via `setAttribute`,\nesse valor será mantido e o parâmetro `defaultLabel` será ignorado." }, { "kind": "method", "name": "setActive", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "active", "type": { "text": "boolean" } } ], "description": "Ativa ou desativa o slide." }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "custom-id", "fieldName": "customId", "description": "Identificador único customizável do slide.\nQuando definido, é aplicado diretamente ao atributo `id` do elemento host,\ngarantindo que referências ARIA externas, testes automatizados e âncoras funcionem corretamente.\nO `br-carousel` pai detecta este valor e usa-o também no `controls-id` do indicador de tabs,\nmantendo o vínculo ARIA entre tab e tabpanel automaticamente.", "type": { "text": "string" } }, { "name": "active", "fieldName": "active", "default": "false", "description": "Marca este slide como visível e acessível.\nPode ser usado declarativamente no HTML para definir o slide inicial:\nEm runtime, o `br-carousel` pai gerencia o estado via `setActive()`.", "type": { "text": "boolean" } } ], "tagName": "br-carousel-page", "csspart": { "name": "content", "description": "Wrapper interno do conteúdo do slide." }, "events": [], "customElement": true, "category": "Interno", "categories": [], "status": "stable" } ], "exports": [ { "kind": "js", "name": "CarouselPage", "declaration": { "name": "CarouselPage", "module": "components/carousel-page/carousel-page.js" } }, { "kind": "custom-element-definition", "name": "br-carousel-page", "declaration": { "name": "CarouselPage", "module": "components/carousel-page/carousel-page.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox.js", "declarations": [ { "kind": "class", "description": "O `br-checkbox` marca ou desmarca uma opção independente. Funciona em formulários como um ``: é enviado com `name` e `value` quando está marcado.\n\n```html\n\n```\n\nUse `indeterminate` para indicar seleção parcial, por exemplo em um \"selecionar todos\" quando só parte dos itens está marcada.\n\n### Quando usar\n\n- Opções em que escolher uma não impede escolher outra.\n- Confirmar uma condição, como aceitar termos.\n\n### Quando evitar\n\n- Só uma opção pode ser escolhida: use `br-radio-group`.\n- A mudança vale na hora, sem enviar formulário: use `br-switch`.\n- Muitas opções em pouco espaço: use `br-select` com `multiple`.\n\nPara várias opções da mesma pergunta, agrupe-as em um `br-checkbox-group`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/checkbox?tab=designer).", "name": "Checkbox", "cssParts": [ { "description": "Contêiner visual do checkbox.", "name": "container" }, { "description": "Elemento input nativo do checkbox.", "name": "input" }, { "description": "Rótulo do checkbox.", "name": "label" }, { "description": "Contêiner da mensagem de validação.", "name": "feedback" } ], "slots": [ { "description": "Slot para o rótulo do checkbox, como alternativa à propriedade label.", "name": "default" }, { "description": "Mensagem de validação, normalmente um `br-message`.", "name": "feedback" } ], "members": [ { "kind": "field", "name": "elementInternals", "type": { "text": "ElementInternals" } }, { "kind": "method", "name": "formDisabledCallback", "parameters": [ { "name": "disabled", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "formResetCallback" }, { "kind": "method", "name": "formStateRestoreCallback", "parameters": [ { "name": "state", "type": { "text": "string | File | FormData | null" } } ] }, { "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": "formDisabled", "type": { "text": "boolean" }, "default": "false", "description": "Controla o estado de disabled herdado do form/fieldset pai." }, { "kind": "field", "name": "groupDisabled", "type": { "text": "boolean" }, "default": "false", "description": "Estado `disabled` herdado de um `br-checkbox-group`." }, { "kind": "field", "name": "numberOfChildren", "type": { "text": "number" }, "default": "0", "description": "Define o número de checkboxes filhos em um grupo de checkboxes." }, { "kind": "field", "name": "slotDefault", "type": { "text": "boolean" }, "default": "false", "description": "Indica se o slot default possui conteúdo." }, { "kind": "field", "name": "hasFeedbackSlot", "type": { "text": "boolean" }, "default": "false", "description": "Indica se o slot de feedback possui conteúdo fornecido pelo consumidor." }, { "kind": "field", "name": "manualValidationMessage", "type": { "text": "string" }, "default": "''", "description": "Mensagem definida pela Constraint Validation API." }, { "kind": "field", "name": "validatorMessage", "type": { "text": "string | null" }, "default": "null", "parsedType": { "text": "string" } }, { "kind": "field", "name": "isValidating", "type": { "text": "boolean" }, "default": "false" }, { "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, "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": "required", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Se verdadeiro, o checkbox é obrigatório e deve ser marcado antes que o formulário possa ser enviado." }, { "kind": "field", "name": "validator", "type": { "text": "CheckboxValidator | undefined" }, "readonly": true, "description": "Regra síncrona ou assíncrona aplicada ao estado booleano do checkbox.\nRetorne uma mensagem para invalidar ou `null` para aceitar o valor.", "parsedType": { "text": "{ }" }, "example": "```js\nconst checkbox = document.querySelector('br-checkbox');\ncheckbox.validator = (checked) => checked ? null : 'Confirme para continuar';\n```" }, { "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.", "deprecated": "Use `labelHidden`." }, { "kind": "field", "name": "labelHidden", "type": { "text": "boolean | undefined" }, "readonly": true, "description": "Oculta visualmente o rótulo. Quando informada, tem precedência sobre `hasHiddenLabel`.", "parsedType": { "text": "boolean" } }, { "kind": "field", "name": "label", "type": { "text": "string" }, "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.\nSe não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.", "parsedType": { "text": "'valid' | 'invalid'" } }, { "kind": "field", "name": "feedbackState", "type": { "text": "'valid' | 'invalid' | undefined" }, "readonly": true, "description": "Estado de feedback. Quando informado, tem precedência sobre `state`.", "parsedType": { "text": "'valid' | 'invalid'" } }, { "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 (`
`).\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": "isFather", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Indica se o checkbox é pai de um grupo de checkboxes.", "deprecated": "Configure seleção coletiva em `br-checkbox-group`/`br-checkgroup`." }, { "kind": "method", "name": "handleIndeterminateWatch", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "handleCheckedWatch", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "handleInternalSyncRequest" }, { "kind": "method", "name": "handleCheckboxGroupState", "parameters": [ { "name": "event", "type": { "text": "CustomEvent<{ managed: boolean; disabled: boolean }>" } } ] }, { "kind": "method", "name": "syncNativeInputState", "privacy": "private", "parameters": [ { "name": "indeterminate", "type": { "text": "boolean" } }, { "name": "checked", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "handleDisabledWatch" }, { "kind": "method", "name": "dispatchInternalStateChange", "privacy": "private", "description": "Notifica somente coordenadores internos sobre mudanças de estado. O\nprotocolo não substitui `input`/`change` públicos e não é documentado no\nCEM para não transformar uma sincronização interna em API de consumo." }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "Promise" } }, "description": "Retorna `true` se o valor do checkbox for válido, caso contrário `false`.\nSe o checkbox for inválido, dispara um evento 'invalid'." }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "Promise" } }, "description": "Retorna `true` se o valor do checkbox for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador." }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Define uma mensagem de validação customizada para o checkbox.\nSe a mensagem for uma string vazia, o erro customizado é limpo." }, { "kind": "method", "name": "validate", "return": { "type": { "text": "Promise" } }, "description": "Executa o validator do checkbox e retorna se o valor atual é válido." }, { "kind": "method", "name": "getValidationState", "return": { "type": { "text": "Promise" } }, "description": "Retorna um snapshot serializável da Constraint Validation API." }, { "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`", "deprecated": "Atualize a propriedade `checked` diretamente." }, { "kind": "method", "name": "setNumberOfChildren", "parameters": [ { "name": "value", "type": { "text": "number" }, "description": "Número de checkboxes filhos." } ], "description": "Define o número de checkboxes filhos em um grupo de checkboxes." }, { "kind": "field", "name": "initialChecked", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "initialIndeterminate", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "nativeInput", "type": { "text": "HTMLInputElement | undefined" }, "privacy": "private", "description": "Referência nativa do input checkbox para acessar a API de validação" }, { "kind": "field", "name": "validationRunId", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "method", "name": "syncFormState", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "isDisabled", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "syncGroupDisabledFromParent", "privacy": "private" }, { "kind": "method", "name": "updateValidity", "privacy": "private" }, { "kind": "method", "name": "hasSlotContentDefault", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getCssClassMap", "privacy": "private", "return": { "type": { "text": "CssClassMap" } } }, { "kind": "field", "name": "effectiveState", "type": { "text": "'valid' | 'invalid' | undefined" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'valid' | 'invalid'" } }, { "kind": "method", "name": "getAriaCheckedValue", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "field", "name": "handleCheckedInput", "privacy": "private", "readonly": true }, { "kind": "field", "name": "handleCheckedChange", "privacy": "private", "readonly": true }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "indeterminate", "fieldName": "indeterminate", "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.", "type": { "text": "boolean" } }, { "name": "checked", "fieldName": "checked", "default": "false", "description": "Define o estado de seleção do checkbox.\nSe definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.", "type": { "text": "boolean" } }, { "name": "custom-id", "fieldName": "customId", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado.", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "default": "false", "description": "Desativa o checkbox, tornando-o não interativo.", "type": { "text": "boolean" } }, { "name": "required", "fieldName": "required", "default": "false", "description": "Se verdadeiro, o checkbox é obrigatório e deve ser marcado antes que o formulário possa ser enviado.", "type": { "text": "boolean" } }, { "name": "validator", "fieldName": "validator", "description": "Regra síncrona ou assíncrona aplicada ao estado booleano do checkbox.\nRetorne uma mensagem para invalidar ou `null` para aceitar o valor.", "type": { "text": "CheckboxValidator" }, "parsedType": { "text": "{ }" } }, { "name": "has-hidden-label", "fieldName": "hasHiddenLabel", "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.", "type": { "text": "boolean" } }, { "name": "label-hidden", "fieldName": "labelHidden", "description": "Oculta visualmente o rótulo. Quando informada, tem precedência sobre `hasHiddenLabel`.", "type": { "text": "boolean" } }, { "name": "label", "fieldName": "label", "description": "Texto descritivo exibido à direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.", "type": { "text": "string" } }, { "name": "name", "fieldName": "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.", "type": { "text": "string" } }, { "name": "state", "fieldName": "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.", "type": { "text": "'valid' | 'invalid'" }, "parsedType": { "text": "'valid' | 'invalid'" } }, { "name": "feedback-state", "fieldName": "feedbackState", "description": "Estado de feedback. Quando informado, tem precedência sobre `state`.", "type": { "text": "'valid' | 'invalid'" }, "parsedType": { "text": "'valid' | 'invalid'" } }, { "name": "value", "fieldName": "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`.", "type": { "text": "string" } }, { "name": "is-father", "fieldName": "isFather", "default": "false", "description": "Indica se o checkbox é pai de um grupo de checkboxes.", "type": { "text": "boolean" } } ], "tagName": "br-checkbox", "status": "stable", "csspart": [ { "name": "container", "description": "Contêiner visual do checkbox." }, { "name": "input", "description": "Elemento input nativo do checkbox." }, { "name": "label", "description": "Rótulo do checkbox." }, { "name": "feedback", "description": "Contêiner da mensagem de validação." } ], "see": [ "br-checkbox-group" ], "events": [ { "name": "checkedChange", "type": { "text": "EventEmitter" }, "description": "Disparado depois que o valor do `checked` foi alterado.", "deprecated": "Use `input`/`change` e leia `event.target.checked`." }, { "name": "indeterminateChange", "type": { "text": "EventEmitter" }, "description": "Disparado depois que o valor do `indeterminate` foi alterado." }, { "name": "brCheckboxValidationChange", "type": { "text": "EventEmitter" }, "description": "Emitido ao iniciar e concluir a validação customizada." } ], "customElement": true, "category": "Formulários", "categories": [ "Formulários", "Seleção" ] } ], "exports": [ { "kind": "js", "name": "Checkbox", "declaration": { "name": "Checkbox", "module": "components/checkbox.js" } }, { "kind": "custom-element-definition", "name": "br-checkbox", "declaration": { "name": "Checkbox", "module": "components/checkbox.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox-group.js", "declarations": [ { "kind": "class", "description": "O `br-checkbox-group` reúne checkboxes da mesma pergunta e adiciona um checkbox \"Selecionar tudo\" no topo.\n\nO \"Selecionar tudo\" marca ou desmarca todas as opções e fica em estado parcial quando só algumas estão marcadas. O `label` vira a legenda do grupo para leitores de tela.\n\n```html\n\n \n \n \n\n```\n\nUse `orientation=\"horizontal\"` para as opções lado a lado, e `select-all-label` e `unselect-all-label` para trocar os textos do \"Selecionar tudo\".\n\n### Quando usar\n\n- Várias opções independentes que respondem à mesma pergunta.\n\n### Quando evitar\n\n- Um único checkbox, como aceite de termos: use só o `br-checkbox`.\n- Apenas uma opção pode ser escolhida: use `br-radio-group`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).", "name": "CheckboxGroup", "slots": [ { "description": "Slot para adicionar os checkboxes controlados pelo grupo.", "name": "default" } ], "members": [ { "kind": "field", "name": "el", "type": { "text": "HTMLElement" }, "description": "Referência ao elemento host do componente." }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Estado de seleção do controlador do grupo." }, { "kind": "field", "name": "isIndeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Estado indeterminado do controlador do grupo." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Desabilita o controlador e os checkboxes contidos no grupo." }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Texto descritivo do grupo.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "unselectAllLabel", "type": { "text": "string" }, "default": "'Desselecionar tudo'", "description": "Rótulo para desmarcar todos os checkboxes." }, { "kind": "field", "name": "selectAllLabel", "type": { "text": "string" }, "default": "'Selecionar tudo'", "description": "Rótulo para marcar todos os checkboxes." }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Define o estado indeterminado inicial do grupo." }, { "kind": "field", "name": "orientation", "type": { "text": "'horizontal' | 'vertical'" }, "readonly": true, "default": "'vertical'", "description": "Orientação visual das opções. Valores inválidos usam `vertical`.", "parsedType": { "text": "'horizontal' | 'vertical'" } }, { "kind": "field", "name": "customId", "readonly": true, "description": "Identificador único do controlador." }, { "kind": "field", "name": "syncingChildren", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "controller", "type": { "text": "HTMLBrCheckboxElement | undefined" }, "privacy": "private" }, { "kind": "field", "name": "structureObserver", "type": { "text": "MutationObserver | undefined" }, "privacy": "private" }, { "kind": "field", "name": "managedChildren", "privacy": "private", "default": "new Set()" }, { "kind": "field", "name": "reconciler", "privacy": "private", "readonly": true }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleChildChange", "parameters": [ { "name": "event", "optional": true, "type": { "text": "CustomEvent" } } ] }, { "kind": "method", "name": "handleInternalChildStateChange", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "field", "name": "handleSlotChange", "privacy": "private", "readonly": true }, { "kind": "field", "name": "handleStructureChange", "privacy": "private", "readonly": true }, { "kind": "method", "name": "dispatchGroupState", "privacy": "private", "parameters": [ { "name": "checkbox", "type": { "text": "HTMLBrCheckboxElement" } }, { "name": "managed", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "syncManagedChildren", "privacy": "private" }, { "kind": "method", "name": "releaseManagedChildren", "privacy": "private" }, { "kind": "method", "name": "getSlotElement", "privacy": "private", "return": { "type": { "text": "HTMLSlotElement | null" } } }, { "kind": "method", "name": "getChildCheckboxes", "privacy": "private", "return": { "type": { "text": "HTMLBrCheckboxElement[]" } } }, { "kind": "method", "name": "getEventCheckboxTarget", "privacy": "private", "return": { "type": { "text": "HTMLBrCheckboxElement | undefined" } }, "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "isParentCheckbox", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "target", "type": { "text": "HTMLBrCheckboxElement" } } ] }, { "kind": "method", "name": "isCheckboxDisabledOrReadonly", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "checkbox", "type": { "text": "HTMLBrCheckboxElement" } } ] }, { "kind": "method", "name": "isCheckboxChecked", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "checkbox", "type": { "text": "HTMLBrCheckboxElement" } } ] }, { "kind": "method", "name": "isCheckboxIndeterminate", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "checkbox", "type": { "text": "HTMLBrCheckboxElement" } } ] }, { "kind": "field", "name": "handleParentChange", "privacy": "private", "readonly": true }, { "kind": "method", "name": "updateGroupState", "privacy": "private" }, { "kind": "method", "name": "syncControllerState", "privacy": "private" }, { "kind": "method", "name": "setParentState", "privacy": "private", "parameters": [ { "name": "checked", "type": { "text": "boolean" } }, { "name": "indeterminate", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "setNumberOfChildren", "privacy": "private" }, { "kind": "method", "name": "getCssClassMap", "privacy": "private", "return": { "type": { "text": "CssClassMap" } } }, { "kind": "field", "name": "effectiveOrientation", "type": { "text": "'horizontal' | 'vertical'" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'horizontal' | 'vertical'" } }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "disabled", "fieldName": "disabled", "default": "false", "description": "Desabilita o controlador e os checkboxes contidos no grupo.", "type": { "text": "boolean" } }, { "name": "label", "fieldName": "label", "description": "Texto descritivo do grupo.", "type": { "text": "string" } }, { "name": "unselect-all-label", "fieldName": "unselectAllLabel", "default": "'Desselecionar tudo'", "description": "Rótulo para desmarcar todos os checkboxes." }, { "name": "select-all-label", "fieldName": "selectAllLabel", "default": "'Selecionar tudo'", "description": "Rótulo para marcar todos os checkboxes." }, { "name": "indeterminate", "fieldName": "indeterminate", "default": "false", "description": "Define o estado indeterminado inicial do grupo.", "type": { "text": "boolean" } }, { "name": "orientation", "fieldName": "orientation", "default": "'vertical'", "description": "Orientação visual das opções. Valores inválidos usam `vertical`.", "type": { "text": "'horizontal' | 'vertical'" }, "parsedType": { "text": "'horizontal' | 'vertical'" } }, { "name": "custom-id", "fieldName": "customId", "description": "Identificador único do controlador." } ], "tagName": "br-checkbox-group", "status": "stable", "see": [ "br-checkbox", "br-checkgroup" ], "events": [], "customElement": true, "category": "Formulários", "categories": [ "Formulários", "Seleção" ] } ], "exports": [ { "kind": "js", "name": "CheckboxGroup", "declaration": { "name": "CheckboxGroup", "module": "components/checkbox-group.js" } }, { "kind": "custom-element-definition", "name": "br-checkbox-group", "declaration": { "name": "CheckboxGroup", "module": "components/checkbox-group.js" } } ] }, { "kind": "javascript-module", "path": "components/checkgroup.js", "declarations": [ { "kind": "class", "description": "Nome antigo do `br-checkbox-group`, mantido para compatibilidade. Em código novo, use `br-checkbox-group`.", "name": "Checkgroup", "slots": [ { "description": "Slot para adicionar os checkboxes controlados pelo grupo.", "name": "default" } ], "members": [ { "kind": "field", "name": "el", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Texto descritivo do grupo.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "labelSelecionado", "type": { "text": "string | undefined" }, "description": "Rótulo legado para desmarcar todos.", "deprecated": "Use `unselectAllLabel`.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "unselectAllLabel", "type": { "text": "string | undefined" }, "description": "Rótulo para desmarcar todos.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "labelDesselecionado", "type": { "text": "string | undefined" }, "description": "Rótulo legado para marcar todos.", "deprecated": "Use `selectAllLabel`.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "selectAllLabel", "type": { "text": "string | undefined" }, "description": "Rótulo para marcar todos.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Estado indeterminado inicial." }, { "kind": "field", "name": "customId", "type": { "text": "string | undefined" }, "readonly": true, "description": "Identificador legado do controlador.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Desabilita o controlador e os checkboxes contidos no grupo." }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "label", "fieldName": "label", "description": "Texto descritivo do grupo.", "type": { "text": "string" } }, { "name": "label-selecionado", "fieldName": "labelSelecionado", "description": "Rótulo legado para desmarcar todos.", "type": { "text": "string" } }, { "name": "unselect-all-label", "fieldName": "unselectAllLabel", "description": "Rótulo para desmarcar todos.", "type": { "text": "string" } }, { "name": "label-desselecionado", "fieldName": "labelDesselecionado", "description": "Rótulo legado para marcar todos.", "type": { "text": "string" } }, { "name": "select-all-label", "fieldName": "selectAllLabel", "description": "Rótulo para marcar todos.", "type": { "text": "string" } }, { "name": "indeterminate", "fieldName": "indeterminate", "default": "false", "description": "Estado indeterminado inicial.", "type": { "text": "boolean" } }, { "name": "custom-id", "fieldName": "customId", "description": "Identificador legado do controlador.", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "default": "false", "description": "Desabilita o controlador e os checkboxes contidos no grupo.", "type": { "text": "boolean" } } ], "deprecated": "Use `br-checkbox-group`.", "tagName": "br-checkgroup", "status": "deprecated", "see": [ "br-checkbox-group" ], "events": [], "customElement": true, "category": "Formulários", "categories": [ "Formulários", "Seleção" ] } ], "exports": [ { "kind": "js", "name": "Checkgroup", "declaration": { "name": "Checkgroup", "module": "components/checkgroup.js" } }, { "kind": "custom-element-definition", "name": "br-checkgroup", "declaration": { "name": "Checkgroup", "module": "components/checkgroup.js" } } ] }, { "kind": "javascript-module", "path": "components/collapse.js", "declarations": [ { "kind": "class", "description": "O `br-collapse` mostra e esconde um bloco de conteúdo ao clicar no título. Funciona como um `
`.\n\n```html\n\n Quem pode solicitar?\n

Qualquer pessoa com CPF regular.

\n\n```\n\nUse `open` para começar aberto. Para que só um item fique aberto por vez (sanfona), dê o mesmo `accordion-group` a todos:\n\n```html\n…\n…\n```\n\nOs ícones de abrir e fechar podem ser trocados por `icon-to-show` e `icon-to-hide`, como propriedade ou como slot.\n\n### Quando usar\n\n- Perguntas frequentes e conteúdos longos divididos em tópicos.\n- Seções opcionais de um formulário longo.\n\n### Quando evitar\n\n- Informação essencial, que precisa ficar sempre visível.\n- Alternar entre visões diferentes da mesma tela: use `br-tab`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/collapse?tab=designer).", "name": "Collapse", "cssParts": [ { "description": "Elemento details nativo do collapse.", "name": "details" }, { "description": "Acionador (summary) do collapse.", "name": "trigger" }, { "description": "Área de conteúdo expansível.", "name": "content" } ], "slots": [ { "description": "Slot para o conteúdo expansível exibido ao abrir o collapse.", "name": "default" }, { "description": "Slot para personalizar o acionador (texto, ícones, imagens, etc.).", "name": "trigger" }, { "description": "Ícone exibido quando o conteúdo está oculto (ex.: ``). Forma preferida para ícones por classe CSS; tem precedência sobre a prop `iconToShow`.", "name": "icon-to-show" }, { "description": "Ícone exibido quando o conteúdo está visível. Forma preferida para ícones por classe CSS; tem precedência sobre a prop `iconToHide`.", "name": "icon-to-hide" } ], "members": [ { "kind": "field", "name": "itemCount", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "suppressNextCustomEvent", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "el", "type": { "text": "HTMLBrCollapseElement" }, "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": "customId", "type": { "text": "string" }, "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId()." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Controla se o collapse está aberto." }, { "kind": "field", "name": "divider", "type": { "text": "boolean" }, "default": "false", "description": "Indica se o componente possui um divisor (divider) inferior." }, { "kind": "field", "name": "accordionGroup", "type": { "text": "string | undefined" }, "default": "null", "description": "Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez entre os irmãos\ndo mesmo pai imediato.", "parsedType": { "text": "string" } }, { "kind": "field", "name": "iconToShow", "type": { "text": "string" }, "default": "'fa6-solid:chevron-down'", "description": "Identificador Iconify do ícone exibido quando o conteúdo está oculto. O valor padrão usa o registro SVG local.\nPara ícones por classe CSS, use o slot `icon-to-show`." }, { "kind": "field", "name": "iconToHide", "type": { "text": "string" }, "default": "'fa6-solid:chevron-up'", "description": "Identificador Iconify do ícone exibido quando o conteúdo está visível. O valor padrão usa o registro SVG local.\nPara ícones por classe CSS, use o slot `icon-to-hide`." }, { "kind": "field", "name": "iconPosition", "type": { "text": "CollapseIconPosition" }, "default": "'right'", "description": "Define a posição do ícone no acionador: 'left' ou 'right'.", "parsedType": { "text": "'left' | 'right'" } }, { "kind": "field", "name": "useIcons", "type": { "text": "boolean" }, "default": "true", "description": "Controla se o identificador visual de expansão/retração será renderizado." }, { "kind": "field", "name": "expansionDirection", "type": { "text": "CollapseExpansionDirection" }, "default": "'down'", "description": "Direção em que o conteúdo é expandido e para a qual o ícone aponta.", "parsedType": { "text": "'left' | 'right' | 'down' | 'up'" } }, { "kind": "field", "name": "colorMode", "type": { "text": "CollapseColorMode" }, "default": "'light'", "description": "Tema visual do Collapse/Accordion.", "parsedType": { "text": "'dark' | 'light'" } }, { "kind": "field", "name": "triggerVariant", "type": { "text": "CollapseTriggerVariant" }, "default": "'surface'", "description": "Forma visual do acionador sem alterar sua semântica nativa.", "parsedType": { "text": "'button' | 'surface' | 'text'" } }, { "kind": "field", "name": "effectiveColorMode", "type": { "text": "CollapseColorMode" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'dark' | 'light'" } }, { "kind": "field", "name": "effectiveExpansionDirection", "type": { "text": "CollapseExpansionDirection" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'left' | 'right' | 'down' | 'up'" } }, { "kind": "field", "name": "effectiveIconPosition", "type": { "text": "CollapseIconPosition" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'left' | 'right'" } }, { "kind": "field", "name": "effectiveTriggerVariant", "type": { "text": "CollapseTriggerVariant" }, "privacy": "private", "readonly": true, "parsedType": { "text": "'button' | 'surface' | 'text'" } }, { "kind": "method", "name": "updateItemCount", "privacy": "private", "parameters": [ { "name": "slot", "optional": true, "type": { "text": "HTMLSlotElement | null" } } ] }, { "kind": "method", "name": "openCollapse", "description": "Abre o collapse programaticamente.", "deprecated": "Atualize a propriedade `open`." }, { "kind": "method", "name": "closeCollapse", "description": "Fecha o collapse programaticamente.", "deprecated": "Atualize a propriedade `open`." }, { "kind": "method", "name": "toggle", "return": { "type": { "text": "Promise" } }, "description": "Alterna o estado aberto.\nO elemento também redispara o evento nativo `toggle` no host; essa ocorrência é sintética (`isTrusted === false`)." }, { "kind": "method", "name": "syncDetailsWithOpen", "privacy": "private", "description": "Mantém o estado do
alinhado com a prop open." }, { "kind": "field", "name": "handleCollapse", "privacy": "private", "description": "Atualiza estado e emite eventos quando o
abre ou fecha." }, { "kind": "method", "name": "emitOpen", "privacy": "private" }, { "kind": "method", "name": "emitClose", "privacy": "private" }, { "kind": "method", "name": "closeOthersInGroup", "privacy": "private", "description": "Fecha outros collapses abertos no mesmo accordion, buscando apenas no pai imediato." }, { "kind": "method", "name": "renderIcon", "privacy": "private", "description": "Seleciona o ícone conforme o estado atual." }, { "kind": "method", "name": "render", "description": "Renderiza o
com acionador e conteúdo expansível." } ], "attributes": [ { "name": "custom-id", "fieldName": "customId", "description": "Identificador único do componente.\nQuando omitido, um valor é gerado automaticamente.\n\n> **Padrão:** valor único gerado por generateUniqueId().", "type": { "text": "string" } }, { "name": "open", "fieldName": "open", "default": "false", "description": "Controla se o collapse está aberto." }, { "name": "divider", "fieldName": "divider", "default": "false", "description": "Indica se o componente possui um divisor (divider) inferior." }, { "name": "accordion-group", "fieldName": "accordionGroup", "default": "null", "description": "Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez entre os irmãos\ndo mesmo pai imediato.", "type": { "text": "string" } }, { "name": "icon-to-show", "fieldName": "iconToShow", "default": "'fa6-solid:chevron-down'", "description": "Identificador Iconify do ícone exibido quando o conteúdo está oculto. O valor padrão usa o registro SVG local.\nPara ícones por classe CSS, use o slot `icon-to-show`." }, { "name": "icon-to-hide", "fieldName": "iconToHide", "default": "'fa6-solid:chevron-up'", "description": "Identificador Iconify do ícone exibido quando o conteúdo está visível. O valor padrão usa o registro SVG local.\nPara ícones por classe CSS, use o slot `icon-to-hide`." }, { "name": "icon-position", "fieldName": "iconPosition", "default": "'right'", "description": "Define a posição do ícone no acionador: 'left' ou 'right'.", "type": { "text": "CollapseIconPosition" }, "parsedType": { "text": "'left' | 'right'" } }, { "name": "use-icons", "fieldName": "useIcons", "default": "true", "description": "Controla se o identificador visual de expansão/retração será renderizado." }, { "name": "expansion-direction", "fieldName": "expansionDirection", "default": "'down'", "description": "Direção em que o conteúdo é expandido e para a qual o ícone aponta.", "type": { "text": "CollapseExpansionDirection" }, "parsedType": { "text": "'left' | 'right' | 'down' | 'up'" } }, { "name": "color-mode", "fieldName": "colorMode", "default": "'light'", "description": "Tema visual do Collapse/Accordion.", "type": { "text": "CollapseColorMode" }, "parsedType": { "text": "'dark' | 'light'" } }, { "name": "trigger-variant", "fieldName": "triggerVariant", "default": "'surface'", "description": "Forma visual do acionador sem alterar sua semântica nativa.", "type": { "text": "CollapseTriggerVariant" }, "parsedType": { "text": "'button' | 'surface' | 'text'" } } ], "tagName": "br-collapse", "status": "stable", "csspart": [ { "name": "details", "description": "Elemento details nativo do collapse." }, { "name": "trigger", "description": "Acionador (summary) do collapse." }, { "name": "content", "description": "Área de conteúdo expansível." } ], "see": [ "br-list" ], "events": [ { "name": "brDidOpen", "type": { "text": "EventEmitter" }, "description": "Emitido ao expandir, com o identificador e o grupo de accordion.", "deprecated": "Use `brCollapseOpen`." }, { "name": "brCollapseOpen", "type": { "text": "EventEmitter" }, "description": "Evento emitido ao expandir." }, { "name": "brDidClose", "type": { "text": "EventEmitter" }, "description": "Emitido ao recolher, com o identificador e o grupo de accordion.", "deprecated": "Use `brCollapseClose`." }, { "name": "brCollapseClose", "type": { "text": "EventEmitter" }, "description": "Evento emitido ao recolher." } ], "customElement": true, "category": "Conteúdo", "categories": [ "Conteúdo", "Ações" ] } ], "exports": [ { "kind": "js", "name": "Collapse", "declaration": { "name": "Collapse", "module": "components/collapse.js" } }, { "kind": "custom-element-definition", "name": "br-collapse", "declaration": { "name": "Collapse", "module": "components/collapse.js" } } ] }, { "kind": "javascript-module", "path": "components/cookiebar.js", "declarations": [ { "kind": "class", "description": "O `br-cookiebar` avisa sobre o uso de cookies e registra o consentimento da pessoa, por categoria e por cookie.\n\nEle aparece como uma barra no rodapé (`mode=\"default\"`) e abre um painel com as categorias quando a pessoa escolhe \"Definir Cookies\" (`mode=\"open\"`).\n\n### Como usar\n\n1. Escreva o texto da barra em `info-text`.\n2. Coloque o título e a introdução do painel em um `br-cookiebar-header`.\n3. Crie um `br-cookiebar-group` por categoria e, dentro dele, um `br-cookiebar-cookie` por cookie. Use `group-opt-out=\"false\"` nas categorias que não podem ser desativadas.\n4. Adicione os links de política em `br-cookiebar-link`, no slot `links`.\n5. Ouça `brCookiebarResponse` para salvar a escolha e ative `show` somente enquanto não houver escolha salva.\n\n```html\n\n \n\n \n \n \n\n \n\n```\n\n```js\nconst cookiebar = document.querySelector('br-cookiebar');\ncookiebar.show = !localStorage.getItem('consentimento');\ncookiebar.addEventListener('brCookiebarResponse', (event) => {\n localStorage.setItem('consentimento', JSON.stringify(event.detail));\n});\n```\n\n`event.detail` traz o estado de cada categoria (`cookieGroups`) e de cada cookie (`cookieList`). Para reabrir o painel depois, por exemplo num link \"Preferências de cookies\", chame `openPanel()`.\n\n### Quando evitar\n\n- Avisos que não tratam de consentimento: use `br-message` ou `br-notification`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/cookiebar?tab=designer).", "name": "Cookiebar", "cssParts": [ { "description": "Container raiz do componente.", "name": "container" }, { "description": "Painel fechado (modo default).", "name": "default-panel" }, { "description": "Painel expandido (modo open).", "name": "open-panel" }, { "description": "Cabeçalho do painel aberto.", "name": "header" }, { "description": "Corpo do painel aberto (com rolagem).", "name": "body" }, { "description": "Rodapé com botões de ação.", "name": "footer" }, { "description": "Camada de sobreposição opcional.", "name": "scrim" } ], "slots": [ { "description": "Recebe os subcomponentes `br-cookiebar-group`, `br-cookiebar-note-group` e `br-cookiebar-note`.", "name": "default" }, { "description": "Recebe `br-cookiebar-header` ou HTML livre.", "name": "header" }, { "description": "Recebe links complementares (`br-cookiebar-link` ou elementos `` livres).", "name": "links" }, { "description": "Recebe botões de ação. Se vazio, o componente renderiza os botões padrão.", "name": "actions" } ], "members": [ { "kind": "field", "name": "el", "type": { "text": "HTMLBrCookiebarElement" } }, { "kind": "field", "name": "openPanelDescription", "type": { "text": "string" }, "privacy": "private", "default": "''", "description": "Descrição do painel `open` espelhada no Shadow DOM para uso em `aria-describedby`.\nDerivada do `entryText` do `br-cookiebar-header` filho (quando presente).\nNecessária porque `aria-describedby` não cruza o limite shadow/light DOM." }, { "kind": "field", "name": "hasActionsSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Indica se há conteúdo no slot `actions`. Controla a exibição da área de ações." }, { "kind": "field", "name": "hasHeaderSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Indica se há conteúdo no slot `header`. Controla a exibição da área de cabeçalho." }, { "kind": "field", "name": "hasLinksSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Indica se há conteúdo no slot `links`. Controla a exibição da área de links." }, { "kind": "field", "name": "isMobile", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Indica se o viewport está no breakpoint mobile (x-small, ≤575px)." }, { "kind": "field", "name": "openLiveAnnouncement", "type": { "text": "string" }, "privacy": "private", "default": "''", "description": "Texto anunciado pela região `aria-live` ao exibir o painel default.\nMantido em elemento sr-only separado para não interferir com o foco do container." }, { "kind": "field", "name": "selectAllState", "type": { "text": "CookiebarSelectionState" }, "privacy": "private", "default": "false", "description": "Estado atual do checkbox \"Selecionar tudo\": `true`, `false` ou `'indeterminate'`.", "parsedType": { "text": "false | true | 'indeterminate'" } }, { "kind": "field", "name": "customId", "type": { "text": "string" }, "readonly": true, "description": "Identificador único; gerado automaticamente quando omitido." }, { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controla a visibilidade do componente.\nO consumidor é responsável por definir este valor com base na persistência do consentimento\n(ex: verificar se já existe um cookie de consentimento salvo)." }, { "kind": "field", "name": "mode", "type": { "text": "CookiebarMode" }, "default": "'default'", "description": "Estado visual atual do painel. Valores inválidos usam `default`.\n- `default`: barra inferior com texto e botões.\n- `open`: painel de tela cheia com grupos de cookies configuráveis.", "parsedType": { "text": "'default' | 'open'" } }, { "kind": "field", "name": "allOptOut", "type": { "text": "boolean" }, "readonly": true, "default": "true", "description": "Define se o cookiebar opera no padrão opt-out (`true`, recomendado) ou opt-in (`false`).\n- **opt-out** (`true`): botão secundário \"Definir Cookies\"; usuário pode configurar cookies.\n- **opt-in** (`false`): botão secundário \"Ver Política de Cookies\"; painel é somente leitura." }, { "kind": "field", "name": "infoText", "type": { "text": "string" }, "readonly": true, "description": "Texto informativo exibido na barra inferior (modo default), descrevendo a política de cookies." }, { "kind": "field", "name": "acceptButton", "type": { "text": "string" }, "readonly": true, "default": "'Aceitar'", "description": "Texto do botão primário de aceite. Padrão: `Aceitar`." }, { "kind": "field", "name": "rejectButton", "type": { "text": "string" }, "readonly": true, "default": "'Rejeitar não obrigatórios'", "description": "Texto do botão de rejeição dos cookies não obrigatórios.\nExibido apenas quando `show-reject-button=\"true\"`." }, { "kind": "field", "name": "showRejectButton", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Quando `true`, exibe o botão \"Rejeitar não obrigatórios\" nos painéis default e open.\nCookies de grupos com `group-opt-out=\"false\"` (sempre ativos) não são afetados." }, { "kind": "field", "name": "optOutButton", "type": { "text": "string" }, "readonly": true, "default": "'Definir Cookies'", "description": "Texto do botão secundário quando `all-opt-out=\"true\"`." }, { "kind": "field", "name": "optInButton", "type": { "text": "string" }, "readonly": true, "default": "'Ver Política de Cookies'", "description": "Texto do botão secundário quando `all-opt-out=\"false\"`." }, { "kind": "field", "name": "closeLabel", "type": { "text": "string" }, "readonly": true, "default": "'Fechar'", "description": "`aria-label` do botão fechar exibido no canto do painel expandido (`mode=\"open\"`).\nPermite traduzir o rótulo para outros idiomas." }, { "kind": "field", "name": "panelLabel", "type": { "text": "string" }, "readonly": true, "default": "'Configurações de cookies'", "description": "`aria-label` do painel expandido (`mode=\"open\"`), que possui `role=\"dialog\"`.\nLeitores de tela anunciam este texto ao entrar no diálogo modal de configuração de cookies.\nDeve descrever o propósito do diálogo de forma sucinta (ex: \"Configurações de cookies\")." }, { "kind": "field", "name": "defaultPanelLabel", "type": { "text": "string" }, "readonly": true, "default": "'Aviso de cookies'", "description": "`aria-label` da barra de aviso de cookies (`mode=\"default\"`).\nDeve descrever o propósito da região de forma sucinta (ex: \"Aviso de cookies\")." }, { "kind": "field", "name": "cookieGroupsLabel", "type": { "text": "string" }, "readonly": true, "default": "'Classes de cookies'", "description": "Rótulo do título da seção de grupos de cookies." }, { "kind": "field", "name": "linksLabel", "type": { "text": "string" }, "readonly": true, "default": "'Links complementares'", "description": "`aria-label` do elemento `