@govbr-ds/webcomponents 2.1.3 → 2.3.0

package/README.md

@@ -33,22 +33,23 @@ Para entender melhor o ciclo de vida dos componentes, acesse a página [https://
 
 ## Integração com frameworks 🔗
 
-Integrar Web Components com frameworks pode ser desafiador em algumas situações. Para facilitar, criamos bibliotecas de integração (wrappers), que encapsulam os Web Components em bibliotecas nativas de frameworks, simplificando a integração com funcionalidades como binding.
+Integrar Web Components com frameworks pode ser desafiador em algumas situações. Para facilitar, criamos bibliotecas de integração (wrappers oficiais para Angular, React e Vue), que encapsulam os Web Components em bibliotecas nativas de cada framework.
 
-Para mais detalhes, consulte a [documentação do Stencil sobre integrações](https://stenciljs.com/docs/overview).
-
-Vale lembrar que, em alguns casos, a integração pode não ser possível, dependendo da evolução da especificação de Web Components e do suporte dos frameworks.
-
-## Compatibilidade de Navegadores 🌐
+O Web Component é a **fonte única da API, comportamento e acessibilidade** de todo o ecossistema. Os wrappers consomem os artefatos gerados pelo output target `dist-custom-elements` do Stencil. SSR, transporte de dados, autenticação, cache e cancelamento continuam sendo responsabilidades da aplicação consumidora.
 
-Esta documentação corresponde à release `>=2.0.0` do pacote `@govbr-ds/webcomponents`.
+Para mais detalhes, consulte a [documentação do Stencil sobre integrações](https://stenciljs.com/docs/overview).
 
-O suporte segue a política [Baseline Widely Available](https://web.dev/baseline), configurada no arquivo [`.browserslistrc`](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/.browserslistrc) e revisada a cada release. Essa política é dinâmica: não há uma versão mínima fixa válida para toda a vida do pacote. Como referência para a release atual, o alvo resolve para Chrome/Edge 121+, Firefox 122+ e Safari 17.2+; confirme a lista da release com `npx browserslist "baseline widely available"`.
+## Compatibilidade e Ambiente 🌐
 
-Os contratos críticos são validados nos projetos automatizados de Chromium, Firefox e WebKit. Isso não equivale a declarar suporte a versões ou engines que não tenham validação automatizada.
+- **Ambiente de desenvolvimento e CI:** Node.js e pnpm nas versões declaradas no `package.json` da raiz do monorepo.
+- **Target de publicação:** JavaScript compatível com ECMAScript 2020 (`es2020`).
+- **Política de navegadores:** [Baseline Widely Available](https://web.dev/baseline), configurada em [`.browserslistrc`](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/.browserslistrc) e revisada a cada release.
+- **Validação de plataforma:** Contratos críticos validados em execuções headless de Chromium, Firefox e WebKit.
 
 > [!NOTE]
-> Internet Explorer não é suportado. O target de compilação TypeScript é `es2020`, e o runtime requer Custom Elements, Shadow DOM e APIs DOM modernas. A aplicação consumidora continua responsável por eventuais polyfills fora do Baseline.
+> Internet Explorer não é suportado. O runtime requer Custom Elements, Shadow DOM e APIs DOM modernas. A aplicação consumidora continua responsável por eventuais polyfills fora do Baseline.
+
+O runtime também precisa expor Web Crypto (`crypto.randomUUID` ou `crypto.getRandomValues`) para os IDs automáticos; em SSR, carregue um polyfill antes de importar os componentes quando essa API não for nativa.
 
 ## Instalação 📦
 
@@ -72,12 +73,12 @@ pnpm add @govbr-ds/core @govbr-ds/webcomponents
 
 As peers declaradas neste pacote são:
 
-| Pacote             | Versão compatível |
-| ------------------ | ----------------- |
-| `@govbr-ds/core`   | `>=3.6.0 <4.0.0`  |
-| `@floating-ui/dom` | `>=1.7.6`         |
-| `date-fns`         | `>=4.1.0`         |
-| `iconify-icon`     | `3.0.2`           |
+- `@govbr-ds/core`
+- `@floating-ui/dom`
+- `date-fns`
+- `iconify-icon`
+
+As faixas aceitas estão em `peerDependencies` no `package.json` publicado deste pacote (também exibidas na página do npm).
 
 ```bash
 npm install @floating-ui/dom date-fns iconify-icon
@@ -129,10 +130,10 @@ Você pode escutar eventos padrão, como clique e mouseover, da mesma forma que
 <br-button>Label</br-button>
 
 <script>
-  const button = document.querySelector('br-button')
+  const button = document.querySelector('br-button');
   button.addEventListener('click', (event) => {
-    console.log('Botão foi clicado', event)
-  })
+    console.log('Botão foi clicado', event);
+  });
 </script>
 ```
 
@@ -140,7 +141,99 @@ Você pode escutar eventos padrão, como clique e mouseover, da mesma forma que
 
 Disponibilizamos exemplos de como usar este projeto com diferentes tecnologias. Consulte o [nosso grupo no GitLab](https://gitlab.com/govbr-ds/bibliotecas/wc 'GovBR-DS/WC') e procure pelos projetos de 'Quickstart' para mais detalhes.
 
-## Desenvolvimento 👨‍💻
+### Formato do `presets.json`
+
+Cada pasta em `src/pages/components/<nome>` pode ter um `presets.json`, lido pelo
+playground de desenvolvimento e pelo Playground do site:
+
+```json
+{
+  "schemaVersion": 2,
+  "presets": [
+    {
+      "id": "remote",
+      "label": "Busca remota",
+      "source": "remote.html",
+      "description": "Opções carregadas sob demanda a partir do termo digitado.",
+      "details": "Primeiro parágrafo da explicação.\n\nSegundo parágrafo."
+    }
+  ],
+  "examples": [{ "id": "remote", "label": "Busca remota", "presets": ["remote"], "defaultPreset": "remote" }]
+}
+```
+
+| Campo                      | Obrigatório | Descrição                                                                                                                                                                                                                                 |
+| -------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `presets[].id`             | sim         | Identificador em minúsculas com hífens, único no arquivo.                                                                                                                                                                                 |
+| `presets[].label`          | sim         | Nome exibido no seletor de presets.                                                                                                                                                                                                       |
+| `presets[].source`         | sim         | Arquivo HTML do preset, relativo à pasta.                                                                                                                                                                                                 |
+| `presets[].hidden`         | não         | `true` oculta o preset no site; o playground de desenvolvimento continua exibindo-o.                                                                                                                                                      |
+| `presets[].description`    | não         | Frase curta sobre o que o preset demonstra, sem repetir o `label`. Aparece numa linha entre a barra do playground e o preview.                                                                                                            |
+| `presets[].details`        | não         | Explicação mais longa (motivação, acessibilidade, tokens, limites, quando usar). Só é válida junto com `description`; linhas em branco (`\n\n`) separam parágrafos. Aparece num `<details>` "Explicação detalhada", recolhido por padrão. |
+| `examples[].id`            | sim         | Nome do exemplo usado pela documentação (`examples/<id>.html`).                                                                                                                                                                           |
+| `examples[].presets`       | sim         | Presets disponíveis no exemplo.                                                                                                                                                                                                           |
+| `examples[].defaultPreset` | não         | Preset aberto inicialmente.                                                                                                                                                                                                               |
+| `examples[].hidden`        | não         | `true` oculta o exemplo no site.                                                                                                                                                                                                          |
+
+`description` e `details` precisam ser textos não vazios. `details` sem
+`description` é erro, informado pelo gerador do menu, pelo build do site e pelo
+teste de contrato. Explique o preset nesses campos, e não em comentários no
+HTML; nos arquivos `.js`/`.css`, mantenha só comentários sobre decisões do
+próprio código.
+
+### JavaScript e CSS dos presets do playground
+
+O HTML do preset não deve conter `<script>` nem `<style>`. Coloque o
+comportamento e os estilos do exemplo em arquivos com o mesmo nome do HTML, na
+pasta do componente:
+
+```text
+src/pages/components/select/remote.html
+src/pages/components/select/remote.js
+src/pages/components/select/remote.css
+```
+
+Para JavaScript ou CSS compartilhado por todos os presets do componente, crie
+`index.js` ou `index.css` na mesma pasta. O conteúdo compartilhado vem antes do
+arquivo do preset.
+
+O playground de desenvolvimento e o Playground do site exibem esse conteúdo nas
+abas `index.js` e `index.css`, e o preview executa o que estiver nelas. O
+JavaScript roda como módulo depois do bundle dos componentes. Ao trocar de
+preset, as abas passam a mostrar os arquivos do novo preset. Os arquivos são
+opcionais.
+
+Mantenha `style` inline somente quando o conteúdo for copiado para o Shadow DOM
+de um componente. É o caso do conteúdo de `br-select-option` em
+`select/complex-option.html`, que CSS do documento não alcança.
+
+Para ocultar um preset ou exemplo no site Docusaurus, defina `"hidden": true`
+no item correspondente de `presets.json`. O Playground do site ignora esse item;
+o playground de desenvolvimento continua exibindo-o para teste. Um exemplo cujos
+presets estejam todos ocultos também deixa de aparecer no site.
+
+Para mais detalhes sobre a arquitetura e utilitários do playground (`pageLoader.js`, controles de propriedades, editor de código e console de eventos), consulte o [README dos scripts das páginas](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/packages/webcomponents/src/pages/scripts/README.md).
+
+## Desenvolvimento
+
+### Figma Code Connect
+
+Os templates de Code Connect ficam co-localizados em `src/components/**/*.figma.ts`
+e geram snippets HTML para as instâncias Figma dos Web Components. A configuração
+de URLs é centralizada na raiz em
+[`figma.config.json`](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/figma.config.json).
+
+Para conferir a cobertura e o parse local sem publicar mappings, execute:
+
+```bash
+pnpm figma:status
+pnpm figma:validate:structure
+pnpm figma:parse
+```
+
+O [guia técnico de Figma Code Connect](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/apps/site/docs/guias-tecnicos/figma-code-connect.mdx)
+documenta o token `FIGMA_ACCESS_TOKEN`, o fluxo de preview/publicação, os
+labels de prerelease e as exceções de aliases.
 
 ### Scripts Disponíveis
 
@@ -150,14 +243,14 @@ No arquivo `package.json` e `project.json`, você encontrará diversos scripts
 
 O pacote possui diferentes níveis de build gerenciados pelo Nx. Abaixo estão os detalhes de cada tarefa:
 
-| Tarefa | Descrição | O que gera |
-| :--- | :--- | :--- |
-| `build` | Tarefa principal de build para distribuição completa. | Core (`dist`), Wrappers (Angular/React/Vue), SSR (`hydrate`) e metadados (`cem`). |
-| `build:dist` | Build focado na distribuição "vanilla" (puro Custom Elements). | Core (`dist`) e metadados (`cem`). Não inclui SSR/Hydrate. |
-| `build:all` | Build completo de todo o ecossistema do pacote. | Tudo da tarefa `build` + Site/Playground (`www`) + Documentação técnica auto-gerada. |
-| `build:hydrate` | Build específico para suporte a Server-Side Rendering (SSR). | App de hidratação em `dist/webcomponents/dist/hydrate`. |
-| `build:www` | Build do playground/site de testes interno. | Pasta `www` com os componentes carregados para visualização local. |
-| `build:docs` | Build de documentação técnica automática. | Gera/atualiza os arquivos `README.md` dentro da pasta de cada componente. |
+| Tarefa          | Descrição                                                      | O que gera                                                                           |
+| :-------------- | :------------------------------------------------------------- | :----------------------------------------------------------------------------------- |
+| `build`         | Tarefa principal de build para distribuição completa.          | Core (`dist`), Wrappers (Angular/React/Vue), SSR (`hydrate`) e metadados (`cem`).    |
+| `build:dist`    | Build focado na distribuição "vanilla" (puro Custom Elements). | Core (`dist`) e metadados (`cem`). Não inclui SSR/Hydrate.                           |
+| `build:all`     | Build completo de todo o ecossistema do pacote.                | Tudo da tarefa `build` + Site/Playground (`www`) + Documentação técnica auto-gerada. |
+| `build:hydrate` | Build específico para suporte a Server-Side Rendering (SSR).   | App de hidratação em `dist/webcomponents/dist/hydrate`.                              |
+| `build:www`     | Build do playground/site de testes interno.                    | Pasta `www` com os componentes carregados para visualização local.                   |
+| `build:docs`    | Build de documentação técnica automática.                      | Gera/atualiza os arquivos `README.md` dentro da pasta de cada componente.            |
 
 #### Outros Scripts
 
@@ -169,16 +262,13 @@ O pacote possui diferentes níveis de build gerenciados pelo Nx. Abaixo estão o
 - **`nx run webcomponents:lint:styles:fix`**: Corrige a formatação dos arquivos CSS/SCSS.
 - **`pnpm --dir packages/webcomponents exec vitest run --project e2e <arquivo>`**: Executa somente um teste E2E.
 
-**Gerenciar baseline de tamanho:**
-
-```bash
-# Da raiz do monorepo:
-pnpm baseline:update
-pnpm baseline:compare
+IDs automáticos de componentes são gerados por `src/shared/utils/id.ts` usando
+Web Crypto. Isso evita dependência de relógio, `Math.random` ou contadores
+mantidos por componentes individuais e mantém os prefixos públicos (por
+exemplo, `br-select-*`).
 
-# Depois de um build, detalha cada JS/CSS em bruto, gzip e Brotli:
-pnpm size:report
-```
+O utilitário `getRandomFromArray` também usa Web Crypto para sortear amostras sem
+reposição, sem repetir o mesmo instante do relógio em um loop.
 
 ### Build e Documentação Autogerada
 
@@ -207,7 +297,7 @@ Tipos de implementação, como referências de DOM e controladores internos, tam
 
 ### Wrappers e geração
 
-Os arquivos em `packages/*/stencil-generated` são artefatos gerados. Alterações de API devem começar no componente Web Component e ser refletidas pela geração dos wrappers. O job `contract_tests` do CI executa `node scripts/check-wrapper-contract.mjs` e detecta nomes antigos do `br-select` nos wrappers. Para o inventário dos scripts e seus pontos de execução, consulte o [README de scripts](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/scripts/README.md).
+Os arquivos em `packages/*/stencil-generated` são artefatos gerados. Alterações de API devem começar no componente Web Component e ser refletidas pela geração dos wrappers. Para o inventário dos scripts e seus pontos de execução, consulte o [README de scripts](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/scripts/README.md).
 
 Nos value accessors Angular, valores externos são tratados como `unknown` até serem validados ou convertidos pelo componente. Isso evita propagar `any` para o contrato do wrapper.
 
@@ -217,9 +307,11 @@ Nossa estratégia de testes utiliza testes end-to-end (E2E) executados em navega
 
 ### Testes E2E (\*.e2e.tsx)
 
-Os testes E2E rodam em browser mode com `@stencil/vitest`, usando `render()` e
-`userEvent`. Cenários de viewport, regressão visual ou consultas profundas em
-Shadow DOM usam a fachada tipada `createBrowserTestFixture()`.
+Os testes E2E rodam em browser mode com Vitest e `@stencil/vitest`, usando
+`render()`, `userEvent` e helpers de estabilidade. Cenários de viewport,
+regressão visual ou consultas profundas em Shadow DOM usam `queryPiercing` ou o
+fixture local já adotado pelo componente; não há um fixture compartilhado para
+essa composição.
 
 Esse tipo de teste é fundamental para validar:
 
@@ -252,15 +344,15 @@ Para mais informações sobre testes no Stencil, consulte a [documentação ofic
 
 ## Formatos do build 📦
 
-A tarefa `nx build webcomponents` lê as definições de saída em [stencil.config.ts](stencil.config.ts) e gera múltiplos formatos dentro de `dist/webcomponents/dist`. Cada pasta/arquivo atende um cenário específico de consumo da biblioteca. O resumo abaixo ajuda a identificar qual artefato utilizar em cada contexto.
+A tarefa `nx build webcomponents` lê as definições de saída em [stencil.config.ts](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/packages/webcomponents/stencil.config.ts) e gera múltiplos formatos dentro de `dist/webcomponents/dist`. Cada pasta/arquivo atende um cenário específico de consumo da biblioteca. O resumo abaixo ajuda a identificar qual artefato utilizar em cada contexto.
 
 ### Visão rápida
 
 | Pasta/arquivo                                                  | Origem no build                                                   | Quando usar                                                                             | Observações                                                                                            |
 | -------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `cjs/`                                                         | `outputTargets: { type: 'dist' }`                                 | Bundlers ou runtimes que ainda resolvem CommonJS (`require`)                            | Referenciado pelo campo `main` do [package.json](package.json) e inclui `loader.cjs.js`                |
+| `cjs/`                                                         | `outputTargets: { type: 'dist' }`                                 | Bundlers ou runtimes que ainda resolvem CommonJS (`require`)                            | Referenciado pelo campo `main` do [package.json](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/packages/webcomponents/package.json) e inclui `loader.cjs.js`                |
 | `esm/`                                                         | `outputTargets: { type: 'dist' }`                                 | Bundlers modernos/ESBuild/Vite/Rollup com suporte a ESM e tree-shaking                  | Referenciado pelo campo `module` do `package.json`                                                     |
-| `components/`                                                  | `outputTargets: { type: 'dist-custom-elements' }`                 | Importações diretas de componentes individuais, geração de *wrappers* Angular/React/Vue | Gera `.js` + `.d.ts` por componente                                                                    |
+| `components/`                                                  | `outputTargets: { type: 'dist-custom-elements' }`                 | Importações diretas de componentes individuais, geração de _wrappers_ Angular/React/Vue | Gera `.js` + `.d.ts` por componente                                                                    |
 | `collection/`                                                  | `outputTargets: { type: 'dist' }` (manifest Stencil)              | Projetos Stencil que desejam consumir os componentes como dependência                   | Descrito pelos campos `collection` e `collection:main` do `package.json`                               |
 | `hydrate/`                                                     | `outputTargets: { type: 'dist-hydrate-script' }`                  | SSR/pré-renderização em Node, integrações como React SSR target                         | Exporta scripts CommonJS/ESM para `@govbr-ds/webcomponents/dist/hydrate`                               |
 | `loader/`                                                      | `outputTargets: { type: 'dist' }`                                 | Registro manual dos componentes em apps vanilla, integrações legadas                    | Disponibiliza `defineCustomElements()` em múltiplos formatos                                           |
@@ -271,19 +363,19 @@ A tarefa `nx build webcomponents` lê as definições de saída em [stencil.conf
 
 ### `cjs/` – bundles CommonJS
 
-- Contém `index.cjs.js`, `webcomponents.cjs.js` e um arquivo `*.entry.js` por componente, acompanhados dos *source maps* (`.map`).
-- É resolvido sempre que o consumidor faz `require('@govbr-ds/webcomponents')` ou quando o bundler privilegia o campo `main` definido em [package.json](package.json).
+- Contém `index.cjs.js`, `webcomponents.cjs.js` e um arquivo `*.entry.js` por componente, acompanhados dos _source maps_ (`.map`).
+- É resolvido sempre que o consumidor faz `require('@govbr-ds/webcomponents')` ou quando o bundler privilegia o campo `main` definido em [package.json](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/packages/webcomponents/package.json).
 - Use este formato em toolchains legadas (Node 14/16, Webpack < 4, Jest sem suporte a ESM) ou quando precisar depurar módulos CommonJS. Inclui também `loader.cjs.js`, permitindo registrar os elementos manualmente com `require('@govbr-ds/webcomponents/dist/loader')`.
 
 ### `esm/` – bundles ES Modules
 
 - Equivalente modular do `cjs/`, com chunks otimizados (`p-*.entry.js`) e `webcomponents.esm.js`.
-- É o alvo do campo `module` do pacote e atende bundlers modernos (Vite, Webpack 5+, Rollup, ESBuild) que fazem tree-shaking. Como os chunks mantêm *imports* explícitos, apenas o necessário é incluído no bundle final.
+- É o alvo do campo `module` do pacote e atende bundlers modernos (Vite, Webpack 5+, Rollup, ESBuild) que fazem tree-shaking. Como os chunks mantêm _imports_ explícitos, apenas o necessário é incluído no bundle final.
 - Prefira esta saída quando o projeto já executa em módulos nativos ou quando precisa de melhor performance em builds SPA/MPA modernos.
 
 ### `components/` – `dist-custom-elements`
 
-- Resultado do `outputTargets: { type: 'dist-custom-elements', customElementsExportBehavior: 'single-export-module' }` definido em [stencil.config.ts](stencil.config.ts).
+- Resultado do `outputTargets: { type: 'dist-custom-elements', customElementsExportBehavior: 'single-export-module' }` definido em [stencil.config.ts](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/packages/webcomponents/stencil.config.ts).
 - Cada componente possui um arquivo isolado (`br-button.js`) e o respectivo `.d.ts`. Para registrar somente um componente, importe sua função `defineCustomElement` diretamente:
 
   ```ts
@@ -293,13 +385,14 @@ A tarefa `nx build webcomponents` lê as definições de saída em [stencil.conf
   ```
 
   Esse formato evita incluir o loader completo quando a aplicação usa poucos componentes.
-- Esta pasta também alimenta os geradores Angular/React/Vue configurados no mesmo arquivo (`customElementsDir` aponta para `dist/components` dentro do pacote publicado). Use-a para criar *wrappers* customizados ou testar componentes isoladamente em Storybook.
+
+- Esta pasta também alimenta os geradores Angular/React/Vue configurados no mesmo arquivo (`customElementsDir` aponta para `dist/components` dentro do pacote publicado). Use-a para criar _wrappers_ customizados ou testar componentes isoladamente.
 
 ### `collection/` – manifest Stencil
 
-- Inclui `collection-manifest.json`, cópias de assets/páginas e os *proxies* de acesso (`index.js`).
+- Inclui `collection-manifest.json`, cópias de assets/páginas e os _proxies_ de acesso (`index.js`).
 - Necessário apenas para quem desenvolve outra biblioteca Stencil e deseja usar `@govbr-ds/webcomponents` como dependência, preservando metadados como slots, eventos e estilos.
-- Os campos `collection` e `collection:main` no [package.json](package.json) apontam para esses arquivos para que o compilador Stencil dos consumidores encontre as definições.
+- Os campos `collection` e `collection:main` no [package.json](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/main/packages/webcomponents/package.json) apontam para esses arquivos para que o compilador Stencil dos consumidores encontre as definições.
 
 ### `hydrate/` – script para SSR/pré-render
 
@@ -316,8 +409,8 @@ A tarefa `nx build webcomponents` lê as definições de saída em [stencil.conf
 ### `webcomponents/` – pacote pronto para CDN
 
 - É a forma mais simples de consumo: `webcomponents.esm.js` + chunks `p-*.entry.js`, prontos para serem servidos via CDN.
-- Recomendada para páginas estáticas, protótipos, Storybook do Design System ou integrações que não passam por bundlers. Lembre-se de importar os estilos de `@govbr-ds/core` (tokens) separadamente.
-- Inclui *chunks* nomeados resolvidos dinamicamente pelo loader gerado pelo Stencil, permitindo *lazy loading* automático.
+- Recomendada para páginas estáticas, protótipos, documentações ou integrações que não passam por bundlers. Lembre-se de importar os estilos de `@govbr-ds/core` (tokens) separadamente.
+- Inclui _chunks_ nomeados resolvidos dinamicamente pelo loader gerado pelo Stencil, permitindo _lazy loading_ automático.
 
 ### `types/` – declarações TypeScript
 
@@ -391,4 +484,3 @@ Utilize os canais abaixo para esclarecer suas dúvidas:
 ## Créditos 🎉
 
 Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') foram desenvolvidos pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') em parceria com a comunidade.
-