@govbr-ds/webcomponents 2.4.0 → 2.5.0

package/dist/collection/components/sign-in/sign-in.js

@@ -8,29 +8,25 @@ import { handleNavigationClick } from "../../shared/utils/navigation";
 import { resolveAllowedPropValue, resolveDensity } from "../../shared/utils/props";
 import { hasNamedLightDomSlot } from "../../shared/utils/slot";
 /**
- * O componente `br-sign-in` é o controle oficial de autenticação e identificação unificada do GovBR-DS, padronizado para representar o acesso via conta Gov.BR ("Entrar com gov.br").
+ * O `br-sign-in` padroniza o botão oficial de autenticação da conta gov.br.
  *
- * ### Para que serve
+ * Pode ser exibido no formato padrão (bloco com texto) ou no formato circular compacto com `shape="circle"`. Use a propriedade `density` para ajustar a densidade visual.
  *
- * - **Identificação oficial do cidadão:** Ponto de entrada padrão para os serviços públicos digitais federais integrados ao provedor de identidade Gov.BR.
- * - **Padronização visual obrigatória:** Aplica tipografia, cores institucionais, ícone da marca gov.br e dimensões em estrita conformidade com o Manual de Identidade Visual do Governo Federal.
- * - **Estados de carregamento e desativação:** Suporta indicação de espera durante o redirecionamento de login.
+ * ```html
+ * <br-sign-in label="Entrar com gov.br"></br-sign-in>
+ * <br-sign-in shape="circle" aria-label="Entrar com gov.br"></br-sign-in>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - O sistema exigir login e autenticação através da plataforma gov.br.
- * - **Evite e prefira outro componente quando:**
- *   - O botão executar uma ação genérica do sistema que não seja login via gov.br (prefira `br-button`).
- *   - O usuário já estiver autenticado e a intenção for apenas exibir o perfil (prefira `br-avatar`).
+ * - Ponto de acesso ou login único com a conta Gov.br em serviços públicos federais.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-sign-in` é um botão de autenticação estilizado com a marca oficial do Governo Federal, recebendo propriedades de rótulo e variantes institucionais.
+ * - Ações gerais de formulário (salvar, enviar, cancelar): use `br-button`.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/signin?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/signin?tab=designer).
  *
-
  * @category Identidade, Ações, Formulários
  * @status stable
  * @slot default - Slot para o texto do sign-in.
@@ -164,7 +160,7 @@ export class SignIn {
         const TagType = this.getTagType();
         const attributes = this.getAttributes();
         const classList = this.getCssClassMap();
-        return (h(Host, { key: 'a0a0dfe061d56cbe2ffabb11432b3eaa893b0122', "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { key: '81aa67e31541eacda111d4d629921b08f6f5f000', part: "button", class: classList, id: this.customId, ...attributes, onClick: this.handleClick, onFocus: this.handleFocus }, h("slot", { key: 'e4e4cc229fc950ac325ec07745fe3e4681ef0c81', name: "icon" }, this.effectiveShape === 'circle' && h("br-icon", { key: 'b011e22af33d5a993c82b043672ecf22a6439abe', iconName: "fa6-solid:user", width: "12", height: "12" })), h("span", { key: '71d1bd83848e2e866a62d2b558dd657ca2b410e4', part: "content" }, h("slot", { key: '1299daa32861ca77c1b5a37963853c57ae853b85' })), this.hasSlotContent('image') && (h("span", { key: '0441bf7f01f61252d1108ff0ffc9d5946332eb6a', part: "image" }, h("slot", { key: 'dd473e474af2daece1ff321c8662b2dda140cd55', name: "image" }))))));
+        return (h(Host, { key: '15d4e5272dcabd329f785bf58e98a278ddc02dc6', "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { key: '3f72b45f59eedd916849f5615c6d53be6ae7dcfe', part: "button", class: classList, id: this.customId, ...attributes, onClick: this.handleClick, onFocus: this.handleFocus }, h("slot", { key: '3032a4f444c96534eb97670e8bb20684f0293a06', name: "icon" }, this.effectiveShape === 'circle' && h("br-icon", { key: '363bf53768bbd67f953234605b186ba0c5609729', iconName: "fa6-solid:user", width: "12", height: "12" })), h("span", { key: '205a5f8ebca228cba3e1da73cd66e11588094b72', part: "content" }, h("slot", { key: '549b0d7a9692a7c385105fce026ad3a49b45ea1e' })), this.hasSlotContent('image') && (h("span", { key: '7fe6067dc73c4bfffc78af0a73642b39f895585e', part: "image" }, h("slot", { key: '41a56d63266590e7c92c591e3e18babe2aa5442c', name: "image" }))))));
     }
     static get is() { return "br-sign-in"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skip-link/skip-link-item/skip-link-item-alias.js

@@ -4,9 +4,13 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * Nome canônico de `br-skip-link-item`, usado como cada atalho dentro de `br-skip-link`.
- * Informe em `target` o `id` ou seletor existente para onde o foco deve ser levado.
- * Use um item por região importante da página. A tag `br-skiplink-item` é legada e não deve ser combinada com esta para o mesmo destino.
+ * Representa um atalho de salto dentro do `br-skip-link`.
+ *
+ * Aponte em `target` o seletor ou `id` do elemento de destino (ex.: `#conteudo`). Coloque o texto no slot padrão.
+ *
+ * ```html
+ * <br-skip-link-item target="#conteudo">Ir para o conteúdo principal</br-skip-link-item>
+ * ```
  *
  * @slot default - Texto do link de navegação rápida.
  * @slot tag - Conteúdo da indicação do atalho.
@@ -53,7 +57,7 @@ export class SkipLinkItemAlias {
         await this.el.shadowRoot?.querySelector('br-skiplink-item')?.navigateToTarget?.();
     }
     render() {
-        return (h(Host, { key: '89e20f3b14bece4fd315c484ba7d8d214dad30e2', role: this.el.closest('br-skip-link') ? 'listitem' : undefined }, h("br-skiplink-item", { key: 'fefef2cff5cf2e6ded5562b6f433f2082fbc56c4', target: this.target, keyNumber: this.keyNumber, customId: this.customId, hideTag: this.hideTag }, h("slot", { key: '1e7a019ac18163c746188461ce4b3150980f2715' }), h("slot", { key: 'dd430b49bb3865a4608708517ea07478de33298d', name: "tag", slot: "tag" }))));
+        return (h(Host, { key: '6fc2d36b3ca6cc9396c3277281d23673cfe8331c', role: this.el.closest('br-skip-link') ? 'listitem' : undefined }, h("br-skiplink-item", { key: '11b94b5030463ad71017f8d20da24c8e6939446e', target: this.target, keyNumber: this.keyNumber, customId: this.customId, hideTag: this.hideTag }, h("slot", { key: '20522c1f9569db2b5c2e64850016b7ab287d6082' }), h("slot", { key: '73ae255da2ca509fde9d4d6568b575195cdd9a27', name: "tag", slot: "tag" }))));
     }
     static get is() { return "br-skip-link-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skip-link/skip-link-item/skip-link-item.js

@@ -7,20 +7,10 @@ import { generateUniqueId } from "../../../shared/utils/id";
 import { getScrollBehavior } from "../../../shared/utils/motion";
 import { resolveIntegerPropValue } from "../../../shared/utils/props";
 /**
- * Subcomponente individual de `br-skip-link`, utilizado para declarar cada atalho específico de salto de bloco acessível.
+ * Item legado de atalho do `br-skip-link`. Em código novo, utilize `br-skip-link-item`.
  *
- * ### Papel na composição
+ * Defina o destino em `target` e o texto do link no slot padrão.
  *
- * - Define o texto descritivo do atalho (ex.: "Ir para o conteúdo") e o identificador do alvo na página (`targetId` ou `href`).
- * - Transfere o foco programático e visual diretamente para o elemento alvo ao ser acionado com Enter ou espaço.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado no slot padrão do orquestrador `br-skip-link`. Cada item deve apontar para um elemento existente na página dotado de `id` e foco acessível (`tabindex="-1"`). Não deve ser usado fora do contexto do skip-link.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/skip-link?tab=designer).
- *
-
  * @slot default - Slot para o texto do link de navegação rápida.
  * @slot tag - Slot para personalizar a tag numérica do atalho de teclado, exibindo o valor de key-number por padrão.
  * @status deprecated
@@ -209,7 +199,7 @@ export class SkipLinkItem {
     }
     render() {
         const itemCountText = this.getItemCountText();
-        return (h(Host, { key: 'dc5f045aed04f64f2f413a7095ccfff73b9c4330', role: this.el.closest('br-skip-link') ? 'listitem' : undefined }, h("br-item", { key: '38a20d0a4f317d1850328fa30ff76c15ad38e588', href: this.target, id: this.customId, density: "large", "aria-keyshortcuts": this.effectiveKeyNumber !== undefined ? `Alt+${this.effectiveKeyNumber}` : undefined }, h("slot", { key: '80629176835e3b0c0f6dbdb173d88e79fa574b96' }), itemCountText && h("span", { key: '91e83e823fbd25738f1f2b02de363610427292a4', "aria-hidden": "true" }, itemCountText), this.effectiveKeyNumber && !this.hideTag && (h("slot", { key: 'd592332978bf4313ac974cad692d6fce97630cbd', name: "tag", slot: "end" }, h("br-tag", { key: '93f61556606e4c42b5ac2b774e5e808a81d1c78d', class: "text ml-1", color: "bg-interactive", "prop:ariaLabel": `Atalho Alt+${this.effectiveKeyNumber}` }, this.effectiveKeyNumber))))));
+        return (h(Host, { key: '5a5609072f40e7f0de05cf7f2410d4dafcd03966', role: this.el.closest('br-skip-link') ? 'listitem' : undefined }, h("br-item", { key: '271eebd8afe4eff868be18850fba7f57ee6eb29f', href: this.target, id: this.customId, density: "large", "aria-keyshortcuts": this.effectiveKeyNumber !== undefined ? `Alt+${this.effectiveKeyNumber}` : undefined }, h("slot", { key: 'b3a17490976e6d27bffd8d1ca32d1b8b036fa3f8' }), itemCountText && h("span", { key: '9bc7502c9892a7b2e3499b6fb11e852fdddd297b', "aria-hidden": "true" }, itemCountText), this.effectiveKeyNumber && !this.hideTag && (h("slot", { key: '0e1918837e91fe09c944570f17471674bdb38024', name: "tag", slot: "end" }, h("br-tag", { key: 'bf21dbbaa7bd6b376cb8d6b9c892284c151cf53e', class: "text ml-1", color: "bg-interactive", "prop:ariaLabel": `Atalho Alt+${this.effectiveKeyNumber}` }, this.effectiveKeyNumber))))));
     }
     static get is() { return "br-skiplink-item"; }
     static get encapsulation() { return "shadow"; }
@@ -345,7 +335,7 @@ export class SkipLinkItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando o item \u00E9 ativado."
+                    "text": "Evento emitido quando o item \u00E9 ativado."
                 },
                 "complexType": {
                     "original": "SkipLinkNavigateDetail",
@@ -392,7 +382,7 @@ export class SkipLinkItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando o item recebe foco."
+                    "text": "Evento emitido quando o item recebe foco."
                 },
                 "complexType": {
                     "original": "SkipLinkItemFocusDetail",

package/dist/collection/components/skip-link/skip-link.js

@@ -8,35 +8,29 @@ import { findComposedOwner } from "../../shared/utils/ownership";
 import { resolveAllowedPropValue, resolveIntegerPropValue } from "../../shared/utils/props";
 const ALT_SHORTCUT_REGEX = /^[1-9]$/;
 /**
- * O componente `br-skip-link` é o bloco essencial de acessibilidade posicionado no topo da página, permitindo que pessoas que utilizam teclado ou tecnologias assistivas saltem blocos repetitivos e acessem diretamente áreas principais da aplicação.
+ * O `br-skip-link` fornece atalhos acessíveis de teclado no topo da página para saltar blocos repetitivos de conteúdo.
  *
- * ### Para que serve
+ * Posicione no início da página. Declare os atalhos usando elementos `br-skip-link-item` no slot padrão, apontando cada destino em `target`.
  *
- * - **Atalho de teclado imediato:** Fornece links diretos ("Ir para o conteúdo principal", "Ir para o menu", "Ir para a busca", "Ir para o rodapé") logo no primeiro acionamento da tecla Tab.
- * - **Conformidade WCAG obrigatória:** Atende ao critério de sucesso 2.4.1 (Bypass Blocks) da WCAG 2.1, essencial para portais e serviços públicos.
- * - **Comportamento visual discreto:** Permanece oculto visualmente por padrão, tornando-se visível imediatamente assim que recebe o foco do teclado.
+ * ```html
+ * <br-skip-link>
+ *   <br-skip-link-item target="#conteudo-principal">Ir para o conteúdo</br-skip-link-item>
+ *   <br-skip-link-item target="#menu-navegacao">Ir para o menu</br-skip-link-item>
+ * </br-skip-link>
+ * ```
  *
- * ### Quando utilizar
+ * O componente permanece oculto e se torna visível automaticamente assim que recebe o foco do teclado (Tab).
  *
- * - **Utilize quando:**
- *   - Obrigatoriamente em todas as páginas e aplicações do GovBR-DS, posicionado como o primeiro elemento interativo do corpo do documento.
- * - **Evite e prefira outro componente quando:**
- *   - O link tiver a intenção de navegação comum no corpo do texto (use `br-link`).
+ * ### Quando usar
  *
- * ### Composição e Subcomponentes
+ * - No topo de todas as páginas para cumprir as diretrizes de acessibilidade (WCAG 2.4.1).
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-skip-link` | **Orquestrador de atalhos.** Agrupa a lista de links rápidos e gerencia visibilidade no foco. | Deve ser o primeiro elemento interativo no topo da página. |
- * | `br-skip-link-item` | **Item individual de atalho.** Especifica o destino e o texto do salto. | Declarado no slot padrão do `br-skip-link`. |
+ * ### Quando evitar
  *
- * ### Como os subcomponentes se relacionam
+ * - Links de navegação comuns no corpo do texto: use `br-link`.
  *
- * O `br-skip-link` atua como contêiner que abriga múltiplos elementos `br-skip-link-item`. Cada item referencia o `id` do elemento de destino na página (ex.: `#main-content`), conduzindo o foco imediatamente para a região desejada.
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/skip-link?tab=designer).
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/skip-link?tab=designer).
- *
-
  * @category Navegação
  * @status stable
  * @slot default - Slot para inserir os itens de navegação rápida (br-skip-link-item). A tag br-skiplink-item é aceita por compatibilidade.
@@ -379,7 +373,7 @@ export class SkipLink {
         };
     }
     render() {
-        return (h(Host, { key: '3eacce063db879bafda8bb7c6f3b8745d0a14c3b' }, h("nav", { key: 'd6b4a7791f3e73c16173c1bb9ccaf891e5e2d94e', part: "container", class: this.getCssClassMap(), id: this.customId }, h("br-list", { key: '35800b1ad7dd867ee029021e448a3d3ecb9c5afb' }, h("slot", { key: '68f013c367099f5bbda73bf2e9d7ec50b3c690a2' })))));
+        return (h(Host, { key: 'af3d33a15f8820388ad762eb32a33ab5a249564b' }, h("nav", { key: '5f664cfac7a19344b12fbbe30c74c886d42b7293', part: "container", class: this.getCssClassMap(), id: this.customId }, h("br-list", { key: 'e8451405a17f90c88bc43877b41e3809475f1aa3' }, h("slot", { key: '369f82a72b2aa848b20a83c6973ec61f8336e57c' })))));
     }
     static get is() { return "br-skip-link"; }
     static get encapsulation() { return "shadow"; }
@@ -572,7 +566,7 @@ export class SkipLink {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando um destino \u00E9 ativado."
+                    "text": "Evento emitido quando um destino \u00E9 ativado."
                 },
                 "complexType": {
                     "original": "SkipLinkNavigateDetail",
@@ -612,7 +606,7 @@ export class SkipLink {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido ao exibir o componente."
+                    "text": "Evento emitido ao exibir o componente."
                 },
                 "complexType": {
                     "original": "void",
@@ -645,7 +639,7 @@ export class SkipLink {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido ao ocultar o componente."
+                    "text": "Evento emitido ao ocultar o componente."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/slider/slider.js

@@ -16,37 +16,27 @@ import { resolveFormValidator, runFormValidator } from "../../shared/utils/valid
 import { buildGradientCss, interpolateGradientColor, normalizeSteps, parseGradientStops, } from "./slider.utils";
 const SLIDER_ORIENTATIONS = ['horizontal', 'vertical'];
 /**
- * O componente `br-slider` é o controle deslizante do GovBR-DS, desenvolvido para permitir que a pessoa usuária selecione um valor numérico único ou uma faixa contínua de valores dentro de um intervalo delimitado.
+ * O `br-slider` seleciona um valor ou uma faixa de valores numéricos em uma trilha graduada.
  *
- * ### Para que serve
+ * Use `min`, `max`, `step` e `value` para definir os limites e o valor. Para selecionar um intervalo (faixa com duas alças), use `range` e `range-value`.
  *
- * - **Seleção numérica fluida:** Permite escolher valores deslizando uma alça (thumb) ao longo de uma trilha graduada, com atualização em tempo real.
- * - **Modo simples e composto (faixa / range):** Suporta uma única alça para valor individual ou duas alças para delimitação de intervalo mínimo e máximo (ex.: faixa de preços, período de anos).
- * - **Entrada numérica sincronizada:** Oferece campo de entrada numérico integrado opcional para digitação exata com sincronização bidirecional.
- * - **Acessibilidade WAI-ARIA:** Suporta controle total por teclado (setas direcionais, Page Up, Page Down, Home e End) e comunica valores atuais via `aria-valuenow`.
+ * ```html
+ * <br-slider min="0" max="100" value="50" label="Volume"></br-slider>
+ * <br-slider min="0" max="1000" range range-value="[200, 800]" label="Faixa de preço"></br-slider>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - O usuário precisar definir grandezas graduais onde a exploração intuitiva seja mais conveniente do que a digitação manual isolada.
- *   - Para filtros de faixa de valores (ex.: "De R$ 100 até R$ 500").
- * - **Evite e prefira outro componente quando:**
- *   - A precisão exata for estritamente necessária e o intervalo for arbitrário (prefira `br-input` numérico).
- *   - O valor for uma escolha categórica sem escala quantitativa (prefira `br-select` ou `br-radio`).
+ * - Ajuste gradual de quantidades contínuas (volume, brilho, zoom).
+ * - Filtros de intervalos numéricos ou de preços.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-slider` possui estrutura rica com slots de referência, validação e customização da alça:
- * - `ref-start`: Slot para customização do rótulo de início da trilha.
- * - `ref-end`: Slot para customização do rótulo de fim da trilha.
- * - `feedback`: Slot para mensagens de validação (como `br-message`).
- * - `thumb-icon`: Slot para ícone personalizado na alça de controle em modo simples.
- * - `thumb-start-icon`: Slot para ícone na alça inicial em modo composto (`range`).
- * - `thumb-end-icon`: Slot para ícone na alça final em modo composto (`range`).
+ * - Entrada numérica exata arbitrária: use `br-input` com `type="number"`.
+ * - Poucas escolhas fixas discretas: use `br-radio` ou `br-select`.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/slider?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/slider?tab=designer).
  *
-
  * @category Formulários, Seleção
  * @status stable
  * @slot ref-start - Conteúdo exibido como referência inicial abaixo da trilha.
@@ -963,7 +953,7 @@ export class Slider {
         return (h("div", { class: "slider-tick-labels", part: "tick-labels", "aria-hidden": "true" }, intermediateTicks.map((value) => (h("span", { class: "slider-tick-label", part: "tick-label", style: this.effectiveVertical ? { bottom: `${this.percentOf(value)}%` } : { left: `${this.percentOf(value)}%` } }, value)))));
     }
     render() {
-        return (h(Host, { key: '7c7f82026393c762b721269c20498c85efd9a6b3', style: { opacity: this.isDisabled() ? '1' : undefined } }, this.label && h("div", { key: '2195d6599d5fd68b42d47d3737bb621f2d095c0a', class: "slider-label" }, this.label), h("div", { key: '9e6ac187a1b53d2db04aaa8e60612e5d06e85fa8', class: this.getCssClassMap(), part: "base" }, h("div", { key: 'f001d13512efcf6fab5837261ffd80254888b6fc', class: "slider-layout", part: "layout" }, this.range && this.renderInput('start'), h("div", { key: '7d0975449e6b3d69d4ca9b6e14130e5ef9b3ca72', class: "slider-body", part: "body" }, this.renderTrack(), this.normalizedSteps.length > 0 && this.renderSteps(), this.renderReferences()), this.range ? this.renderInput('end') : this.renderInput('start'))), h("div", { key: '2e72a57e643f887282c9222cefac6a4106e32751', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'f1e9157b6202558e2e26b550a052cb94b089823d', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+        return (h(Host, { key: '1147c81a987cf587a1119f835e08d4460b0d6033', style: { opacity: this.isDisabled() ? '1' : undefined } }, this.label && h("div", { key: '78df705aaddf021d7dcf0ff2208ef33679ee7528', class: "slider-label" }, this.label), h("div", { key: '2d7efa2bfcc70c75aced4ad805f14d6ecc1dc183', class: this.getCssClassMap(), part: "base" }, h("div", { key: '6e7b19bdb9891b11fa65d7176572ad19ba216452', class: "slider-layout", part: "layout" }, this.range && this.renderInput('start'), h("div", { key: '3c5edea75d5258041fd9feb264baa249e0ab3ca7', class: "slider-body", part: "body" }, this.renderTrack(), this.normalizedSteps.length > 0 && this.renderSteps(), this.renderReferences()), this.range ? this.renderInput('end') : this.renderInput('start'))), h("div", { key: 'a45c95fca22cb10e20d1c081f34742efd2a90764', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '9c964150d5e1e7a80328a2a2669d7a01555892ff', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
     }
     static get is() { return "br-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -1250,7 +1240,7 @@ export class Slider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Orienta\u00E7\u00E3o can\u00F4nica. Quando informada, tem preced\u00EAncia sobre `vertical`; valores inv\u00E1lidos usam `horizontal`."
+                    "text": "Orienta\u00E7\u00E3o padr\u00E3o. Quando informada, tem preced\u00EAncia sobre `vertical`; valores inv\u00E1lidos usam `horizontal`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/step/step-item/step-item.js

@@ -5,20 +5,10 @@
 import { Host, h } from "@stencil/core";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * Subcomponente individual de `br-step`, responsável por representar visualmente e semanticamente uma etapa específica do fluxo.
+ * Representa uma etapa individual dentro do `br-step`.
  *
- * ### Papel na composição
+ * Defina o número da etapa em `step-number` e o texto em `label`. Use `status` (`done`, `active`, `pending`) para indicar o estado da etapa.
  *
- * - Exibe o indicador numérico ou ícone da etapa, o rótulo descritivo e o estado de conclusão.
- * - Permite navegação interativa opcional caso etapas anteriores possam ser revisitadas diretamente com clique.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado no slot padrão do orquestrador `br-step`. O componente pai calcula a orientação (horizontal ou vertical), as linhas de conexão intermediárias e aplica os atributos de acessibilidade da etapa atual. Não deve ser usado fora de um `br-step`.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).
- *
-
  * @slot content-area - Slot para conteúdo customizado dentro do botão do item do step.
  * @slot step-content - Slot para conteúdo da etapa exibido no layout vertical (texto, formulário, etc.).
  *
@@ -189,16 +179,16 @@ export class StepItem {
     render() {
         const isTab = this.itemRole === 'tab';
         const highlight = this.effectiveHighlight;
-        return (h(Host, { key: 'ed82d07a8b1736dce7291807916126b7ae0e43c7', "data-label": this.labelPosition, "data-type": this.contentType === 'no-content' ? 'void' : undefined, "data-vertical-content-placement": this.stepLayout === 'vertical' ? this.verticalContentPlacement : undefined, role: isTab ? 'tab' : undefined, "aria-label": isTab ? this.ariaLabelContent : undefined, "aria-selected": isTab ? String(this.active) : undefined, "aria-controls": isTab && this.controlsId !== '' && !this.isInShadowRoot() ? this.controlsId : undefined, tabIndex: isTab ? (this.active ? 0 : -1) : undefined, class: {
+        return (h(Host, { key: '408cef945a1adeedfacb877231431c632cb0b1b4', "data-label": this.labelPosition, "data-type": this.contentType === 'no-content' ? 'void' : undefined, "data-vertical-content-placement": this.stepLayout === 'vertical' ? this.verticalContentPlacement : undefined, role: isTab ? 'tab' : undefined, "aria-label": isTab ? this.ariaLabelContent : undefined, "aria-selected": isTab ? String(this.active) : undefined, "aria-controls": isTab && this.controlsId !== '' && !this.isInShadowRoot() ? this.controlsId : undefined, tabIndex: isTab ? (this.active ? 0 : -1) : undefined, class: {
                 [this.stepLayout]: true,
                 'mode-controller': this.mode === 'controller' || isTab,
                 'role-tab': isTab,
                 'disabled-host': this.disabled,
                 timeline: this.showTimeLine,
-            } }, h("button", { key: '5b3a14070783522cc466dc994674d8be3c63780f', class: {
+            } }, h("button", { key: '1ac4e467bfefaf7efd88088467d551f198216c16', class: {
                 'step-progress-btn': true,
                 active: this.active,
-            }, type: "button", inert: isTab || undefined, "aria-label": !isTab ? this.ariaLabelContent : undefined, "aria-controls": !isTab && this.controlsId !== '' && !this.isInShadowRoot() ? this.controlsId : undefined, disabled: this.disabled, "step-num": this.contentType === 'default' ? this.content : undefined, "data-alert": highlight || undefined }, this.label && (h("span", { key: '6549d27dba9121d40b70a7a2080e804479a2333e', class: "step-info", part: "label" }, this.label)), this.contentType === 'br-icon' && (h("span", { key: '3fb64fdf5f21af1d95947544869ca5238f301f29', class: "step-icon" }, h("br-icon", { key: '411a3f05ade0a4dd42d6f4ebc85e3bcb157ec7b0', iconName: this.brIconName ?? '', width: "16", height: "16", "aria-hidden": "true" }))), this.contentType === 'slotted' && (h("span", { key: 'ba3192f57c1d7e74e1e20ac6397f28065a57a754', class: "step-icon" }, h("slot", { key: '347e49abacaf31c7a50e898b2acbe556d7dfd5bd', name: "content-area" }))), this.mode === 'step' && highlight && (h("div", { key: '0b0d74cd7cd8dc93347a6873391f80b493a47f07', class: this.getAlertClass() }, h("br-icon", { key: 'd9ad457434c05b8925d90f0287fc5f916654fced', iconName: this.iconNames[highlight], width: "16", height: "16", class: highlight === 'warning' ? 'warning-color' : '' })))), h("div", { key: 'bb605a5ce11a6c4f1a472299ba373ed72cac8a51', class: "step-content-area" }, h("slot", { key: '5098094cff163b92a82dcb51df407d5b08921e29', name: "step-content" }))));
+            }, type: "button", inert: isTab || undefined, "aria-label": !isTab ? this.ariaLabelContent : undefined, "aria-controls": !isTab && this.controlsId !== '' && !this.isInShadowRoot() ? this.controlsId : undefined, disabled: this.disabled, "step-num": this.contentType === 'default' ? this.content : undefined, "data-alert": highlight || undefined }, this.label && (h("span", { key: '1c077c6c035063d1ac73e4d8b0bf8959c8c09169', class: "step-info", part: "label" }, this.label)), this.contentType === 'br-icon' && (h("span", { key: 'ea5ffb83673fcb5b54ea3d60df3edd85a6653654', class: "step-icon" }, h("br-icon", { key: '40208fbbacf7f7b9059d8a6a6db44b911cb45c73', iconName: this.brIconName ?? '', width: "16", height: "16", "aria-hidden": "true" }))), this.contentType === 'slotted' && (h("span", { key: 'a656e131f290f0646e050c009c9ba7a70bd9bd5e', class: "step-icon" }, h("slot", { key: 'f1c5eb04c0966eff12df4559ace562129624992e', name: "content-area" }))), this.mode === 'step' && highlight && (h("div", { key: '3726a847486ac6961fbd54d79f49eb053fb59191', class: this.getAlertClass() }, h("br-icon", { key: '08a69222daefecff50a944c8efbf9f5bc8c6ead1', iconName: this.iconNames[highlight], width: "16", height: "16", class: highlight === 'warning' ? 'warning-color' : '' })))), h("div", { key: 'd45d6c7e9335ce36d2910958e1b778f9f80b0c06', class: "step-content-area" }, h("slot", { key: 'ca016031b12630be4e4f1a073623fae631d5ae90', name: "step-content" }))));
     }
     static get is() { return "br-step-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/step/step.js

@@ -17,38 +17,29 @@ const STEP_MODES = ['controller', 'step'];
 const STEP_PROGRESSION_TYPES = ['linear', 'nonlinear'];
 const STEP_VERTICAL_CONTENT_PLACEMENTS = ['between', 'side'];
 /**
- * O componente `br-step` é o indicador visual de etapas e progresso do GovBR-DS, desenvolvido para orientar a pessoa usuária ao longo de fluxos sequenciais e processos com múltiplos passos.
+ * O `br-step` exibe o progresso visual de um fluxo dividido em etapas consecutivas.
  *
- * ### Para que serve
+ * Declare cada etapa com `br-step-item` no slot padrão. Controle a etapa ativa pela propriedade `current`. Suporta orientação horizontal e vertical via `direction`.
  *
- * - **Visualização de progresso:** Informa claramente em qual etapa do processo o usuário se encontra, quais já foram concluídas e quais ainda estão pendentes.
- * - **Orientação flexível:** Suporta leiaute horizontal (ideal para telas amplas) e vertical (ideal para fluxos em barra lateral ou dispositivos móveis).
- * - **Semântica e acessibilidade WAI-ARIA:** Comunica o passo ativo através de `aria-current="step"` e indica etapas concluídas ou bloqueadas.
+ * ```html
+ * <br-step current="2">
+ *   <br-step-item step-number="1" label="Identificação"></br-step-item>
+ *   <br-step-item step-number="2" label="Dados Pessoais"></br-step-item>
+ *   <br-step-item step-number="3" label="Confirmação"></br-step-item>
+ * </br-step>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - O fluxo tiver entre 2 e 5 etapas lógicas com uma sequência recomendada de execução (ex.: Identificação > Dados > Pagamento > Confirmação).
- * - **Evite e prefira outro componente quando:**
- *   - A pessoa usuária puder alternar livremente entre as seções em qualquer ordem sem dependência de progresso (prefira `br-tab`).
- *   - For necessário um contêiner completo que gerencie também os painéis de formulário e botões de avançar/voltar (prefira `br-wizard`).
+ * - Processos lineares com 3 ou mais etapas bem delimitadas.
  *
- * ### Composição e Subcomponentes
+ * ### Quando evitar
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-step` | **Orquestrador de progresso.** Gerencia a orientação, conecta as linhas de fluxo e calcula os estados das etapas. | Contêiner raiz da barra de progresso. |
- * | `br-step-item` | **Etapa individual.** Representa cada passo com número, rótulo e estado. | Declarado dentro do slot padrão do `br-step`. |
+ * - Formulários de múltiplas páginas onde o próprio componente gerencia as telas: use `br-wizard`.
+ * - Navegação plana entre abas da mesma tela: use `br-tab`.
  *
- * ### Como os subcomponentes se relacionam
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/step?tab=designer).
  *
- * O componente pai `br-step` recebe múltiplos elementos `br-step-item` em seu slot padrão:
- * 1. Com base na propriedade `current` ou nos índices declarados, o pai calcula as linhas conectoras visuais entre as etapas.
- * 2. Sincroniza os estados de cada etapa: concluída (`completed`), ativa (`active`) ou desabilitada (`disabled`).
- *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).
- *
-
  * @category Navegação, Progresso
  * @status stable
  * @slot default - Slot para os itens do step (br-step-item), aceitando apenas esse componente.
@@ -486,7 +477,7 @@ export class Step {
     }
     render() {
         const isTablist = this.isTablist;
-        return (h(Host, { key: '9c911332978824aeef3be291bcda9d0f411efbb5' }, this.stepItems.length > 0 &&
+        return (h(Host, { key: 'e7b1df0b490c7ca0790ff539426fecca6b5f8102' }, this.stepItems.length > 0 &&
             (isTablist ? (h("div", { part: "container", role: "tablist", "aria-orientation": this.effectiveOrientation, "aria-label": this.getAreaLabel(), class: this.getCssClassMap(), "data-label": this.effectiveLabelPosition }, h("div", { class: "step-progress" }, h("slot", { onSlotchange: () => this.handleSlotChange() })))) : (h("div", { part: "container", role: "group", "aria-label": this.getAreaLabel(), class: this.getCssClassMap(), "data-label": this.effectiveLabelPosition }, h("div", { class: "step-progress" }, h("slot", { onSlotchange: () => this.handleSlotChange() })))))));
     }
     handleSlotChange() {

package/dist/collection/components/switch/switch.js

@@ -11,32 +11,28 @@ import { hasAssignedSlotContent, hasDefaultLightDomContent } from "../../shared/
 import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
 const SWITCH_LABEL_POSITIONS = ['right', 'left', 'top'];
 /**
- * O componente `br-switch` é o interruptor de alternância do GovBR-DS, desenvolvido para ativar ou desativar instantaneamente um recurso, modo ou configuração na interface.
+ * O `br-switch` alterna instantaneamente entre os estados ligado e desligado.
  *
- * ### Para que serve
+ * Defina o estado em `checked`. Opcionalmente configure os rótulos de estado em `label-on` e `label-off`.
  *
- * - **Alternância binária imediata:** Alterna entre dois estados mutuamente exclusivos (ligado/desligado, ativo/inativo, habilitado/desabilitado) com efeito imediato na aplicação.
- * - **Rótulo contextual dinâmico:** Suporta textos explicativos de estado (ex.: "Ativado" / "Desativado") e ícones de apoio.
- * - **Acessibilidade nativa WAI-ARIA:** Utiliza internamente o papel semântico `role="switch"` com o atributo `aria-checked`, garantindo anúncio claro de estado para leitores de tela.
+ * ```html
+ * <br-switch label="Receber notificações por e-mail" checked></br-switch>
+ * <br-switch label="Modo escuro" label-on="Ligado" label-off="Desligado"></br-switch>
+ * ```
  *
- * ### Quando utilizar
+ * Em formulários HTML, o componente integra-se via `ElementInternals`, participando do submit nativo.
  *
- * - **Utilize quando:**
- *   - A alteração de estado entrar em vigor imediatamente após a interação, sem depender de um botão "Salvar" ou submissão de formulário.
- *   - Para preferências do sistema (ex.: "Tema escuro", "Notificações ativas", "Wi-Fi ligado").
- * - **Evite e prefira outro componente quando:**
- *   - A escolha fizer parte de um formulário com múltiplos campos que serão submetidos juntos (prefira `br-checkbox`).
- *   - A escolha for entre duas opções com nomes explícitos diferentes de ligado/desligado (prefira `br-radio`).
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Ativar ou desativar uma funcionalidade com efeito imediato na tela ou configuração.
  *
- * O `br-switch` é um controle direto:
- * - `default`: Slot para personalização do rótulo descritivo do switch (com prioridade sobre a propriedade `label`).
- * - `feedback`: Slot para mensagens de validação contextual (como `br-message`).
+ * ### Quando evitar
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/switch?tab=designer).
+ * - Confirmação de termos em formulários (ex.: "Li e concordo"): use `br-checkbox`.
+ * - Escolha entre alternativas mutuamente exclusivas: use `br-radio`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/switch?tab=designer).
  *
-
  * @category Formulários, Seleção, Ações
  * @status stable
  * @slot default - Slot para o rótulo do switch, com prioridade sobre a propriedade label.
@@ -257,11 +253,11 @@ export class Switch {
     }
     render() {
         const hasVisibleText = this.hasVisibleText();
-        return (h(Host, { key: 'cdf7fbf56aab55137acc7fa795acf138d3e58ad6', "aria-disabled": this.isDisabled() ? 'true' : null }, h("div", { key: '141edc6e4b71f3b7a878d06b6fe1fbc8fe40e4dc', class: this.getCssClassMap(), part: "container" }, h("input", { key: '30f130caae79ff96ead26d3728bec6800443f224', part: "input", ref: (el) => (this.nativeInput = el), id: this.customId, type: "checkbox", name: this.name, checked: this.checked, disabled: this.isDisabled(), required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.manualValidationMessage || this.validatorMessage
+        return (h(Host, { key: '141b4f6f371d03a6554a01a15996ce89b26f962c', "aria-disabled": this.isDisabled() ? 'true' : null }, h("div", { key: '7cdf5f1cbd227f33144d4c960a71b991c8c51c11', class: this.getCssClassMap(), part: "container" }, h("input", { key: '4a54952ba5dda655270b20d20eab2ca427d9e4c1', part: "input", ref: (el) => (this.nativeInput = el), id: this.customId, type: "checkbox", name: this.name, checked: this.checked, disabled: this.isDisabled(), required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.manualValidationMessage || this.validatorMessage
                 ? `${this.customId}-feedback`
                 : null, "aria-errormessage": this.manualValidationMessage || this.validatorMessage || this.hasFeedbackSlot
                 ? `${this.customId}-feedback`
-                : null, onInput: this.handleCheckedInput, onChange: this.handleCheckedChange, onClick: this.handleClick, ...(!hasVisibleText ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), h("label", { key: '755fdd0c8bc57e8d386532267b2d1364d7496897', part: "label", htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label || ''), this.labelOn && this.labelOff && (h("div", { key: '96b6dfdea3eff539dd1aead339bfd9555ba87bc7', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff, "aria-hidden": "true", part: "data" }))), h("div", { key: '140e5aea8abea6d5afed40313510ef63ad5e588c', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.manualValidationMessage && !this.validatorMessage }, h("slot", { key: '9050c26808d86f5d21c018853cdfb00e66c2dee2', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.manualValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.manualValidationMessage || this.validatorMessage })) : null)));
+                : null, onInput: this.handleCheckedInput, onChange: this.handleCheckedChange, onClick: this.handleClick, ...(!hasVisibleText ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), h("label", { key: '2d4f0422b86a75add78b798b0d4432cde6e6115a', part: "label", htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label || ''), this.labelOn && this.labelOff && (h("div", { key: '21a5d6c5711287154942ac4e02bfbcd28692311b', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff, "aria-hidden": "true", part: "data" }))), h("div", { key: 'fb6a97b0bfad1c1d51dc908e7b2e4a106aca01bc', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.manualValidationMessage && !this.validatorMessage }, h("slot", { key: '5e1123a152e4b467b33c6773b69fa1a4e1d4374a', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.manualValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.manualValidationMessage || this.validatorMessage })) : null)));
     }
     static get is() { return "br-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab-item/tab-item.js

@@ -7,20 +7,10 @@ import { FOCUSABLE_SELECTORS } from "../../../shared/utils/focus";
 import { generateUniqueId } from "../../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * Subcomponente individual de `br-tab`, responsável por representar conjuntamente a aba de seleção e o respectivo painel de conteúdo associado.
+ * Define uma aba e seu respectivo painel de conteúdo dentro do `br-tab`.
  *
- * ### Papel na composição
+ * Defina o título da aba em `label` ou no slot `label`, e insira o conteúdo do painel no slot padrão. Use `active` para iniciar a aba selecionada e `disabled` para desabilitá-la.
  *
- * - Define o título ou rótulo da aba (propriedade `label` ou slot `label`), ícones de apoio e o estado de seleção (`active`) ou desativação (`disabled`).
- * - Contém o corpo de elementos que compõem o painel renderizado quando a aba é selecionada.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro do slot padrão do orquestrador `br-tab`. O componente pai é responsável por montar a barra de botões acessíveis, sincronizar os atributos WAI-ARIA e controlar a alternância de visibilidade do painel. Não deve ser usado isoladamente sem o `br-tab` pai.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/tab?tab=designer).
- *
-
  * @slot default - Slot para o conteúdo do item da aba.
  */
 export class TabItem {
@@ -179,7 +169,7 @@ export class TabItem {
         };
     }
     render() {
-        return (h(Host, { key: 'd38057720e25509e1adb3d50c65b316b8857ed40', class: this.getCssClassMap(), id: `tab-panel-${this.tabItemId}`, role: "tabpanel", "aria-labelledby": `tab-button-${this.tabItemId}`, hidden: !(this.active ?? this.isActive), tabindex: (this.active ?? this.isActive) && !this.hasFocusableContent ? 0 : -1 }, h("slot", { key: 'b409428f62310f19f3cd9bdb9f9d5581e092a091', onSlotchange: () => this.updateFocusableContentState() })));
+        return (h(Host, { key: '6886bfc498caffc1673412ac3444e91a338bc9ee', class: this.getCssClassMap(), id: `tab-panel-${this.tabItemId}`, role: "tabpanel", "aria-labelledby": `tab-button-${this.tabItemId}`, hidden: !(this.active ?? this.isActive), tabindex: (this.active ?? this.isActive) && !this.hasFocusableContent ? 0 : -1 }, h("slot", { key: '758a66e6696c190ab2005d01140e8011cc9990f6', onSlotchange: () => this.updateFocusableContentState() })));
     }
     static get is() { return "br-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -252,7 +242,7 @@ export class TabItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Texto can\u00F4nico do item. Quando informado, tem preced\u00EAncia sobre `tabItemTitle`."
+                    "text": "Texto do item. Quando informado, tem preced\u00EAncia sobre `tabItemTitle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -355,7 +345,7 @@ export class TabItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado ativo can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isActive`."
+                    "text": "Estado ativo atual. Quando informado, tem preced\u00EAncia sobre `isActive`."
                 },
                 "getter": false,
                 "setter": false,