{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "components/avatar.js", "declarations": [ { "kind": "class", "description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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).", "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`." }, { "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.", "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).", "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.", "type": { "text": "AvatarStatusPosition" }, "parsedType": { "text": "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'" } } ], "tagName": "br-avatar", "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", "status": "stable" } ], "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": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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-crumb.", "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 canônica da página inicial. Quando informada, tem precedência sobre `homeUrl`." }, { "kind": "field", "name": "crumbs", "type": { "text": "string | BreadcrumbItem[]" }, "description": "Define o array de objetos que receberá os nomes e links do breadcrumb.\nDefine valor padrão do breadcrumb 'defaultCrumbs'." }, { "kind": "field", "name": "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.", "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" }, { "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": "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 && isTruncate && !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 canônica da página inicial. Quando informada, tem precedência sobre `homeUrl`.", "type": { "text": "string" } }, { "name": "crumbs", "fieldName": "crumbs", "description": "Define o array de objetos que receberá os nomes e links do breadcrumb.\nDefine valor padrão do breadcrumb 'defaultCrumbs'.", "type": { "text": "string | BreadcrumbItem[]" } }, { "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.", "type": { "text": "BrNavigationMode" }, "parsedType": { "text": "'native' | 'event'" } } ], "tagName": "br-breadcrumb", "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", "status": "stable" } ], "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": "Item declarativo canônico de `br-breadcrumb`.", "name": "BreadcrumbItem", "slots": [ { "description": "Conteúdo alternativo do rótulo.", "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." }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Contexto de navegação." }, { "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", "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": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/breadcrumb?tab=designer).", "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." }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Define o alvo do link quando `href` está presente. (ex: _blank, _self)." }, { "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", "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", "status": "deprecated" } ], "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": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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.", "parsedType": { "text": "'dark' | undefined" } }, { "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).", "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.", "parsedType": { "text": "'primary' | 'secondary' | 'tertiary' | undefined" } }, { "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 canônico. Quando informado, tem precedência sobre `isActive`." }, { "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 canônico. Quando informado, tem precedência sobre `isLoading`." }, { "kind": "field", "name": "shape", "type": { "text": "ButtonShape | undefined" }, "description": "Define o formato do botão.", "parsedType": { "text": "'circle' | 'block' | 'pill' | undefined" } }, { "kind": "field", "name": "type", "type": { "text": "ButtonType | undefined" }, "description": "Define o tipo de botão, especificando seu comportamento padrão.", "parsedType": { "text": "'button' | 'submit' | 'reset' | undefined" } }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Define o valor inicial do botão em um formulário." }, { "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.", "deprecated": "Use o atributo/propriedade nativo `tabIndex` do host." }, { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "readonly": true, "default": "null", "description": "Define o rótulo acessível usado por tecnologias assistivas." }, { "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'." }, { "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'." }, { "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." }, { "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'.", "parsedType": { "text": "'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null" } }, { "kind": "field", "name": "handleClick", "privacy": "private" }, { "kind": "method", "name": "getCssClassMap", "privacy": "private", "return": { "type": { "text": "CssClassMap" } } }, { "kind": "method", "name": "render" } ], "attributes": [ { "name": "color-mode", "fieldName": "colorMode", "description": "Define se o botão usará um esquema de cores escuro.", "type": { "text": "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).", "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.", "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 canônico. 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 canônico. Quando informado, tem precedência sobre `isLoading`.", "type": { "text": "boolean" } }, { "name": "shape", "fieldName": "shape", "description": "Define o formato do botão.", "type": { "text": "ButtonShape" }, "parsedType": { "text": "'circle' | 'block' | 'pill'" } }, { "name": "type", "fieldName": "type", "description": "Define o tipo de botão, especificando seu comportamento padrão.", "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.", "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" } }, { "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" } }, { "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" } }, { "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" } }, { "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'.", "type": { "text": "AriaHasPopup | null" }, "parsedType": { "text": "'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null" } } ], "tagName": "br-button", "csspart": { "name": "button", "description": "Parte para o elemento button interno, usada para estilos customizados via ::part(button)." }, "events": [], "customElement": true, "category": "Ações", "status": "stable" } ], "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": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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`." }, { "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", "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", "status": "stable" } ], "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": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/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`." }, { "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`." }, { "kind": "field", "name": "interval", "type": { "text": "number" }, "readonly": true, "default": "5000", "description": "Intervalo em milissegundos entre cada avanço automático.\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": "'right' | 'left'" } }, { "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": "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)'" }, { "kind": "field", "name": "mobileMediaQuery", "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": "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.\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": "'right' | 'left'" } }, { "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", "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 canônico 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 canônico 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 canônico emitido quando a reprodução automática é pausada." } ], "customElement": true, "category": "Conteúdo", "status": "stable" } ], "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": "## Design System\n\nSubcomponente do `br-carousel`. Representa um slide individual dentro do carrossel.\nDeve ser usado exclusivamente como filho direto de `br-carousel`.\n\nPara a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).", "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", "description": "" }, { "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." }, { "kind": "field", "name": "slideLabel", "type": { "text": "string | undefined" }, "privacy": "private", "description": "" }, { "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." }, { "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", "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": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/checkbox?tab=designer).", "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": "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" }, { "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, "default": "`br-checkbox-${checkboxId++}`", "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "readonly": true, "default": "false", "description": "Desativa o checkbox, tornando-o não interativo." }, { "kind": "field", "name": "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.", "parsedType": { "text": "{ } | undefined" } }, { "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`." }, { "kind": "field", "name": "label", "type": { "text": "string" }, "readonly": true, "description": "Texto descritivo exibido à direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "readonly": true, "description": "Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo.\nO valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários." }, { "kind": "field", "name": "state", "type": { "text": "'valid' | 'invalid'" }, "readonly": true, "description": "Indica a validade do checkbox.\nSe não for especificado, o valor padrão é `null`, indicando que a validade não foi definida." }, { "kind": "field", "name": "feedbackState", "type": { "text": "'valid' | 'invalid' | undefined" }, "readonly": true, "description": "Estado de feedback canônico. Quando informado, tem precedência sobre `state`." }, { "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" }, { "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": "updateValidity", "privacy": "private" }, { "kind": "method", "name": "hasSlotContentDefault", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getCssClassMap", "privacy": "private", "return": { "type": { "text": "CssClassMap" } } }, { "kind": "method", "name": "getAriaCheckedValue", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "field", "name": "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", "default": "`br-checkbox-${checkboxId++}`", "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.", "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'" } }, { "name": "feedback-state", "fieldName": "feedbackState", "description": "Estado de feedback canônico. Quando informado, tem precedência sobre `state`.", "type": { "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", "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." } ], "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", "status": "stable" } ], "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": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).", "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": "label", "type": { "text": "string | undefined" }, "description": "Texto descritivo do grupo." }, { "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." }, { "kind": "field", "name": "customId", "readonly": true, "default": "`br-checkbox-group-${checkboxGroupId++}`", "description": "Identificador único do controlador." }, { "kind": "field", "name": "syncingChildren", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "method", "name": "handleChildChange", "parameters": [ { "name": "event", "type": { "text": "CustomEvent" } } ] }, { "kind": "field", "name": "handleSlotChange", "privacy": "private", "readonly": true }, { "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": "CustomEvent" } } ] }, { "kind": "method", "name": "isParentCheckbox", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "target", "type": { "text": "HTMLBrCheckboxElement" } } ] }, { "kind": "field", "name": "handleParentChange", "privacy": "private", "readonly": true }, { "kind": "method", "name": "updateGroupState", "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": "method", "name": "render" } ], "attributes": [ { "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." }, { "name": "orientation", "fieldName": "orientation", "default": "'vertical'", "description": "Orientação visual das opções.", "type": { "text": "'horizontal' | 'vertical'" } }, { "name": "custom-id", "fieldName": "customId", "default": "`br-checkbox-group-${checkboxGroupId++}`", "description": "Identificador único do controlador." } ], "tagName": "br-checkbox-group", "events": [], "customElement": true, "category": "Formulários", "status": "stable" } ], "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": "", "name": "Checkgroup", "slots": [ { "description": "Slot para adicionar os checkboxes controlados pelo grupo.", "name": "default" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Texto descritivo do grupo." }, { "kind": "field", "name": "labelSelecionado", "type": { "text": "string | undefined" }, "description": "Rótulo legado para desmarcar todos.", "deprecated": "Use `unselectAllLabel`." }, { "kind": "field", "name": "unselectAllLabel", "type": { "text": "string | undefined" }, "description": "Rótulo para desmarcar todos." }, { "kind": "field", "name": "labelDesselecionado", "type": { "text": "string | undefined" }, "description": "Rótulo legado para marcar todos.", "deprecated": "Use `selectAllLabel`." }, { "kind": "field", "name": "selectAllLabel", "type": { "text": "string | undefined" }, "description": "Rótulo para marcar todos." }, { "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." }, { "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." }, { "name": "custom-id", "fieldName": "customId", "description": "Identificador legado do controlador.", "type": { "text": "string" } } ], "deprecated": "Use `br-checkbox-group`.", "tagName": "br-checkgroup", "events": [], "customElement": true, "category": "Formulários", "status": "deprecated" } ], "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": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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" } ], "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." }, { "kind": "field", "name": "iconToShow", "type": { "text": "string" }, "default": "'fa6-solid:chevron-down'", "description": "Classe CSS do ícone exibido quando o conteúdo está oculto." }, { "kind": "field", "name": "iconToHide", "type": { "text": "string" }, "default": "'fa6-solid:chevron-up'", "description": "Classe CSS do ícone exibido quando o conteúdo está visível." }, { "kind": "field", "name": "iconPosition", "type": { "text": "CollapseIconPosition" }, "default": "'right'", "description": "Define a posição do ícone no acionador: 'left' ou 'right'.", "parsedType": { "text": "'right' | 'left'" } }, { "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": "'right' | 'left' | '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": "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": "Classe CSS do ícone exibido quando o conteúdo está oculto." }, { "name": "icon-to-hide", "fieldName": "iconToHide", "default": "'fa6-solid:chevron-up'", "description": "Classe CSS do ícone exibido quando o conteúdo está visível." }, { "name": "icon-position", "fieldName": "iconPosition", "default": "'right'", "description": "Define a posição do ícone no acionador: 'left' ou 'right'.", "type": { "text": "CollapseIconPosition" }, "parsedType": { "text": "'right' | 'left'" } }, { "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": "'right' | 'left' | '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", "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." } ], "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 canônico 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 canônico emitido ao recolher." } ], "customElement": true, "category": "Conteúdo", "status": "stable" } ], "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": "Componente de gestão de consentimento de cookies (LGPD), obrigatório em sites e aplicativos do\nGoverno Federal que coletam dados de usuários.\n\nApresenta duas etapas visuais:\n- **default** – barra inferior com texto informativo e botões de ação;\n- **open** – painel de tela cheia com lista de classes de cookies configuráveis.\n\nA persistência do consentimento é responsabilidade do consumidor: ouça o evento\n`brCookiebarAccept` e armazene o payload onde desejar (localStorage, cookie HTTP, API etc.).\n\nPara a documentação completa, consulte o [Design System 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.\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 `