@govbr-ds/webcomponents 2.0.0-next.35 → 2.0.0-next.36

package/dist/README.md

@@ -1,17 +1,21 @@
 # Web Components GovBR-DS
 
-A biblioteca de Web Components do [GovBR-DS](https://gov.br/ds) está sendo desenvolvida utilizando o [Stencil](https://stenciljs.com/), um compilador que cria Web Components (Custom Elements). O Stencil incorpora os melhores conceitos dos frameworks mais populares em uma ferramenta simples de compilação. Para mais informações sobre o Stencil, visite o [site oficial](https://stenciljs.com/).
+<a id="readme-top"></a>
+
+A biblioteca de Web Components do [GovBR-DS](https://gov.br/ds) é desenvolvida utilizando o [Stencil](https://stenciljs.com/), um compilador que cria Web Components (Custom Elements). O Stencil combina os melhores conceitos dos frameworks mais populares em uma ferramenta simples e eficiente. Para mais informações, visite o [site oficial do Stencil](https://stenciljs.com/).
 
 ## Demonstração 🚀
 
-Veja nossos componentes em funcionamento:
+Confira nossos componentes em ação:
 
 - [Versão 1.x](https://gov.br/ds/webcomponents/)
 - [Versão 2.x (em desenvolvimento)](https://govbr-ds.gitlab.io/bibliotecas/wbc/govbr-ds-wbc/)
 
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
+
 ## Tecnologias 💻
 
-Esse projeto é desenvolvido usando:
+Este projeto utiliza as seguintes tecnologias:
 
 1. [GovBR-DS](https://gov.br/ds/ 'GovBR-DS')
 1. [Stencil](https://stenciljs.com/ 'Stencil')
@@ -19,321 +23,310 @@ Esse projeto é desenvolvido usando:
 1. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
 1. [NX Monorepo](https://nx.dev/ 'NX Monorepo')
 
-## O que são Web Components?
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-São um conjunto de tecnologias que permitem aos desenvolvedores criar novos elementos HTML personalizados, reutilizáveis ​​e encapsulados para uso em páginas e aplicativos da web. Eles se baseiam em padrões da web existentes e são suportados por todos os navegadores modernos.
+## O que são Web Components? ❓
 
-O diagrama mostra os três componentes principais dos Web Components:
+Web Components são um conjunto de tecnologias que permitem criar novos elementos HTML personalizados, reutilizáveis e encapsulados para uso em páginas e aplicativos web. Baseados em padrões da web, são suportados por todos os navegadores modernos.
 
-- Elementos HTML personalizados: tags HTML definidas usando JavaScript e podem ser usados ​​como qualquer outro elemento HTML.
-- Shadow DOM: é um espaço de nome encapsulado para cada elemento HTML personalizado. Isso significa que os estilos e o JavaScript do elemento não interferem no resto da página.
-- Templates: são fragmentos de HTML que podem ser reutilizados em vários elementos.
-- Slots: são áreas em um elemento HTML personalizado onde templates podem ser inseridos.
+O diagrama abaixo ilustra os três principais componentes dos Web Components:
 
-### Benefícios dos Web Components
+- **Elementos HTML personalizados**: Tags HTML definidas com JavaScript, usadas como qualquer outro elemento HTML.
+- **Shadow DOM**: Um espaço de nome encapsulado para cada elemento HTML personalizado, garantindo que estilos e scripts não interfiram no restante da página.
+- **Templates**: Fragmentos de HTML reutilizáveis em vários elementos.
+- **Slots**: Áreas em um elemento HTML personalizado onde templates podem ser inseridos.
 
-1. Reusabilidade
-1. Modularidade
-1. Encapsulamento
-1. Compatibilidade
-1. Manutenibilidade
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
 ### Ciclo de Vida
 
 Para entender melhor o ciclo de vida dos componentes, acesse a página [https://stenciljs.com/docs/component-lifecycle](https://stenciljs.com/docs/component-lifecycle).
 
-## Integração com frameworks
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-A integração entre Web Components e frameworks pode não ser fácil em determinadas situações. Por isso nós criamos as bibliotecas de integração (wrappers). Basicamente eles encapsulam os Web Components em uma biblioteca de componentes na tecnologia nativa de algum framework. Isso facilita a integração com funcionalidades nativas dos frameworks, como por exemplo o binding.
+## Integração com frameworks 🔗
 
-Para mais detalhes sobre como o Stencil faz a integração consulte [a documentação do Stencil sobre integrações](https://stenciljs.com/docs/overview).
+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.
 
-Note que determinadas situações pode não ser possível fazer essa integração. Isso depende muito da evolução da especificação de Web Components e do suporte dos frameworks.
+Para mais detalhes, consulte a [documentação do Stencil sobre integrações](https://stenciljs.com/docs/overview).
 
-## Font Awesome e Fonte Rawline
+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.
 
-Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
+## Uso 📚
 
-## Instalação ⚙️
+### Instalação
 
-Instale o pacote abaixo:
+Instale o pacote com o comando abaixo:
 
 ```bash
 npm install --save-dev @govbr-ds/webcomponents
 ```
 
-## Scripts Disponíveis 📜
+> [!NOTE]
+> Certifique-se de que o pacote `@govbr-ds/webcomponents` foi instalado corretamente.
 
-No arquivo `package.json` e `project.json`, você encontrará uma variedade de scripts úteis. Aqui está uma lista com a descrição de cada um:
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-```bash
-nx start webcomponents
-```
-
-Executa o site no localhost para desenvolvimento.
-
-```bash
-nx build webcomponents
-```
-
-Compila o projeto para produção.
-
-```bash
-nx test:unit webcomponents
-```
+### Font Awesome e Fonte Rawline
 
-Executa os testes unitários.
+Nossos componentes utilizam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') e a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS. Ambas são essenciais para garantir a estética e funcionalidade dos componentes. Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-las via CDN.
 
-```bash
-nx lint:tsx webcomponents
-```
+- **[Font Awesome](https://fontawesome.com/ 'Font Awesome')**: Biblioteca amplamente utilizada para adicionar ícones vetoriais e logotipos aos projetos, fácil de integrar e personalizar.
+- **[Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')**: Fonte moderna e elegante, alinhada à identidade visual do Design System do GovBR-DS.
 
-Executa lint nos códigos TypeScript.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-```bash
-nx lint:md webcomponents
-```
+### Passo-a-passo
 
-Executa lint nos arquivos markdown.
+Os Web Components GOVBR são elementos HTML regulares ou personalizados (Web Components). Em uma página HTML simples, podem ser usados como qualquer outro elemento.
 
-```bash
-nx lint:styles webcomponents
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents/dist/webcomponents/webcomponents.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents/dist/webcomponents/webcomponents.esm.js"></script>
+    <link rel="stylesheet" href="node_modules/@govbr-ds/core/dist/core-tokens.min.css" />
+  </head>
+  <body>
+    <br-button>Clique aqui</br-button>
+  </body>
+</html>
 ```
 
-Executa lint nos arquivos de estilos.
-
-## Testes
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-Nossa estratégia de testes é dividida em duas abordagens principais: testes unitários e testes end-to-end (E2E).
-
-### Testes Unitários (\*.spec.tsx)
+### Eventos
 
-Os testes unitários são ideais para validar a lógica interna dos componentes de forma isolada e rápida. Utilizamos o método `newSpecPage()` para testar:
+Você pode escutar eventos padrão, como clique e mouseover, da mesma forma que faria com elementos HTML normais. Muitos componentes também emitem eventos personalizados, que recomendamos fortemente utilizar. Esses eventos funcionam como os eventos padrão, mas possuem nomes específicos. Consulte a documentação de cada componente para obter detalhes sobre os nomes e dados dos eventos.
 
-- Estado inicial: comportamento do componente sem props
-- Props: valores válidos, inválidos e mudanças em tempo de execução
-- Classes CSS: presença e ausência de classes condicionais
-- Slots: renderização correta do conteúdo
-- Lógica interna: métodos, cálculos e transformações
-- Validações básicas: required, minLength, maxValue etc.
+```html
+<br-button>Label</br-button>
 
-```typescript
-it('deve inicializar com o estado padrão padrão', async () => {
-  const page = await newSpecPage({
-    components: [BrComponent],
-    html: `<br-component></br-component>`,
+<script>
+  const button = document.querySelector('br-button')
+  button.addEventListener('click', (event) => {
+    console.log('Botão foi clicado', event.detail.valor)
   })
-  expect(page.root).toEqualHtml(`<br-component>...</br-component>`)
-})
+</script>
 ```
 
-### Testes E2E (\*.e2e.ts)
-
-Os testes E2E são executados em um navegador real usando o método `newE2EPage()`. São mais lentos mas essenciais para testar:
-
-- Eventos do componente: click, blur, change etc.
-- Interações do usuário: drag-drop, digitação, atalhos
-- Integrações DOM: forms, validação nativa, aria-\*
-- Estilos visuais: dimensões, cores, transições
-- Shadow DOM: slots, parts, estilos encapsulados
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-```typescript
-it('should emit click event', async () => {
-  const page = await newE2EPage()
-  await page.setContent('<br-component></br-component>')
-  const brComponent = await page.find('br-component')
-  const clickEvent = await brComponent.spyOnEvent('click')
-  await brComponent.click()
-  expect(clickEvent).toHaveReceivedEvent()
-})
-```
+### Exemplos de uso
 
-Para mais detalhes sobre testes no Stencil, consulte a [documentação oficial](https://stenciljs.com/docs/testing-overview).
+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.
 
-## Configuração 🛠️
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-Os passos para usar os Web Components GovBR-DS em uma aplicação podem variar dependendo da tecnologia usada. Abaixo estão os passos gerais para grande parte dos casos:
+## Desenvolvimento 👨‍💻
 
-### Adicione os tokens do `@govbr-ds/core`
+### Estrutura do Projeto
 
-```ts
-import 'node_modules/@govbr-ds/core/dist/core-tokens.min.css'
+```plaintext
+├── 📁 src
+    ├── 📁  components
+        ├── 📁  br-component
+            ├── 📁  sections
+                ├── 📄 migrate.md
+            ├── 📁  _tests
+                ├── 📄 br-component.e2e.ts
+                ├── 📄 br-component.spec.tsx
+                ├── 📄 readme.md
+            ├── 📄 br-component.scss
+            ├── 📄 br-component.tsx
+    ├── 📁  pages
+        ├── 📁  components
+            ├── 📁  br-component
+              ├── 📄 index.js
+              ├── 📄 exemplo.html
+        ├── 📁  scripts
+        ├── 📄 index.html
+    ├── 📁  value-accessors
+├── 📄 stencil.config.ts
+├── ...
 ```
 
-### Adicione o `loader` do JS
-
-Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
-
-```javascript
-@import "node_modules/@govbr-ds/webcomponents/dist/loader"
-```
+- **src**: Contém o código-fonte do projeto.
+  - **components**: Diretório com os componentes Web criados com Stencil. Cada componente possui sua própria pasta.
+    - **br-component**: Pasta específica para o componente `br-component`.
+      - **sections**: Contém arquivos markdown para inclusão no site.
+        - **migrate.md**: Explica como migrar o componente da versão anterior para a nova.
+      - **_tests**: Contém os arquivos de teste.
+        - **br-component.e2e.ts**: Testes end-to-end (E2E) do componente.
+        - **br-component.spec.tsx**: Testes unitários (Unit) do componente.
+      - **br-component.tsx**: Arquivo principal do componente, com lógica e estrutura.
+      - **br-component.scss**: Arquivo de estilo do componente.
+      - **readme.md**: Documentação gerada automaticamente durante o `build`.
+  - **pages**: Contém exemplos dos componentes Web criados com Stencil.
+    - **components**: Diretório com exemplos dos componentes.
+      - **br-component**: Pasta específica para o componente `br-component`.
+        - **index.js**: Arquivo para executar ações nos exemplos, como escutar eventos.
+        - **exemplo.html**: Arquivo com o código de cada exemplo.
+    - **scripts**: Scripts usados no ambiente de desenvolvimento.
+  - **value-accessors**: Configurações para 2-way binding em Angular e Vue.
+  - **index.html**: Página inicial do servidor de desenvolvimento.
+- **stencil.config.ts**: Arquivo principal de configuração do projeto Stencil, onde são definidas opções como saída do build, plugins e scripts globais.
 
-Também é possível importar o JS da biblioteca usando um CDN (não mantido por nossa equipe):
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@<VERSÃO>/dist/loader/index.js"></>
-```
+### Scripts Disponíveis
 
-**Importante**: Dependendo do seu projeto pode ser necessário importar diretamente o arquivo `/dist/webcomponents/webcomponents.esm.js`. Observe as necessidades do seu projeto e importe os arquivos de acordo.
+No arquivo `package.json` e `project.json`, você encontrará diversos scripts úteis. Abaixo está uma lista com a descrição de cada um deles:
 
-### Use as tags dos custom elements
+- **`nx start webcomponents`**: Inicia o site localmente para desenvolvimento.
+- **`nx build webcomponents`**: Realiza a compilação do projeto para produção.
+- **`nx test:unit webcomponents`**: Executa os testes unitários.
+- **`nx lint:tsx webcomponents`**: Realiza a análise estática nos arquivos TypeScript.
+- **`nx lint:md webcomponents`**: Realiza a análise estática nos arquivos markdown.
+- **`nx lint:styles webcomponents`**: Realiza a análise estática nos arquivos de estilo.
 
-```html
-<br-button>Click aqui</br-button>
-```
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-### Eventos
+### Build
 
-Você pode escutar eventos padrão, como clique e mouseover, da mesma forma que faria com elementos HTML normais. Muitos componentes também emitem eventos personalizados, que recomendamos fortemente utilizar. Esses eventos funcionam como os eventos padrão, mas possuem nomes específicos. Consulte a documentação de cada componente para obter detalhes sobre os nomes e dados dos eventos.
+Ao gerar o `build` deste projeto Stencil, são automaticamente criados:
 
-```html
-<br-button>Label</br-button>
+- O arquivo `readme.md` dentro da pasta de cada componente.
+- Documentações dos componentes na pasta `apps/site/docs/stencil-generated-docs`, que podem ser utilizadas e versionadas pelo site.
 
-<script>
-  const button = document.querySelector('br-button')
-  button.addEventListener('click', (event) => {
-    console.log('Botão foi clicado')
-  })
-</script>
+```bash
+nx build webcomponents
 ```
 
-## VSCODE
-
-Ao criar nossos Web Components fazemos uso de custom elements. O VSCODE não conhece os componentes e por isso não consegue fazer sugestões inteligentes para usar no autocomplete. Para auxiliar com isso nós geramos um arquivo `vscode-data.json` com as definições dos componentes e disponibilizamos junto com o nosso pacote npm.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-Para importar no seu VSCODE, adicione o campo abaixo alterando o local onde o seu projeto armazena o `node_modules`.
+### Testes
 
-```json
-{
-  "html.customData": ["./node_modules/@govbr-ds/webcomponents/vscode-data.json"]
-}
-```
-
-### Build
-
-Nesse projeto stencil ao gerar um `build` do projeto também são gerados automaticamente:
+Nossa estratégia de testes é dividida em duas abordagens principais: testes unitários e testes end-to-end (E2E).
 
-- Arquivo `readme.md` dentro da pasta de cada componente.
-- Documentações dos componentes na pasta `apps/site/docs/stencil-generated-docs` para serem usadas e versionadas pelo site.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-### Exemplos de uso
+#### Testes Unitários (\*.spec.tsx)
 
-Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/bibliotecas/wc 'GovBR-DS/WC') e procure pelos projetos de 'Quickstart' para mais detalhes.
+Os testes unitários são ideais para validar a lógica interna dos componentes de forma isolada e eficiente. Utilizamos o método `newSpecPage()` para verificar:
 
-## Arquitetura do Projeto Stencil
+- Estado inicial: comportamento do componente sem propriedades.
+- Propriedades: valores válidos, inválidos e alterações em tempo de execução.
+- Classes CSS: presença e ausência de classes condicionais.
+- Slots: renderização correta do conteúdo.
+- Lógica interna: métodos, cálculos e transformações.
+- Validações básicas: required, minLength, maxValue, entre outras.
 
-### Estrutura do Projeto
+```typescript
+import { newSpecPage } from '@stencil/core/testing'
+import { BrComponent } from '../component'
 
-```markdown
-webcomponents/
-├── src/
-│ ├── components/
-│ │ └── br-component/
-│ │ ├── sections/
-│ │ │ └── migrate.md
-│ │ ├── tests/
-│ │ │ ├── br-component.e2e.ts
-│ │ │ └── br-component.spec.tsx
-│ │ ├── br-component.scss
-│ │ ├── br-component.tsx
-│ │ └── readme.md
-│ ├── pages/
-│ │ └── components/
-│ │ └── br-component/
-│ │ └── index.js
-│ │ └── exemplo.html
-│ │ └── scripts/
-│ └── utils/
-│ └── index.html
-├── stencil.config.ts
-├── package.json
-└── tsconfig.json
+it('deve inicializar com o estado padrão', async () => {
+  const page = await newSpecPage({
+    components: [BrComponent],
+    html: /*html*/ `<br-component></br-component>`,
+  })
+  expect(page.root).toEqualHtml(`<br-component>...</br-component>`)
+})
 ```
 
-#### Descrição dos Diretórios
-
-- **src/**: Contém o código-fonte do projeto.
-
-  - **components/**: Contém os componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
-
-    - **br-component/**: Uma pasta específica para o componente `br-component`.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-      - **sections/**: Pasta com arquivos markdown para serem incluídos no site.
-
-        - **migrate.md**: Arquivo explicando 'como migrar' o componente da versão anterior para a nova.
+### Testes E2E (\*.e2e.ts)
 
-      - **test/**: Pasta com os arquivos de teste.
+Os testes E2E são realizados em um navegador real utilizando o método `newE2EPage()`. Embora sejam mais lentos, são fundamentais para validar:
 
-        - **br-component.e2e.ts**: Arquivo para testes end-to-end (E2E) do componente.
+- Eventos do componente: clique, blur, change, entre outros.
+- Interações do usuário: drag-drop, digitação, atalhos.
+- Integrações DOM: forms, validação nativa, atributos aria-\*.
+- Estilos visuais: dimensões, cores, transições.
+- Shadow DOM: slots, parts, estilos encapsulados.
 
-        - **br-component.spec.tsx**: Arquivo para testes unitários (Unit) do componente.
+```typescript
+import { newE2EPage } from '@stencil/core/testing'
 
-      - **br-component.tsx**: O arquivo principal do componente, que contém a lógica e a estrutura do componente.
+describe('br-component', () => {
+  it('deve renderizar', async () => {
+    const page = await newE2EPage()
+    await page.setContent(/*html*/ `<br-component></br-component>`)
 
-      - **br-component.scss**: O arquivo de estilo do componente.
+    const element = await page.find('br-component')
 
-      - **readme.md**: Documentação gerada automaticamente do componente durante `build`.
+    expect(element).toHaveClass('hydrated')
+  })
 
-  - **pages/**: Contém os exemplos dos componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
+  it('deve ter shadow root', async () => {
+    const page = await newE2EPage()
+    await page.setContent(/*html*/ `<br-component-component></br-component-component>`)
 
-    - **components/**: Pasta com os exemplos dos componentes.
+    const element = await page.find('br-component')
 
-    - **scripts/**: Pasta com os scripts usados no ambiente de desenvolvimento.
+    expect(element.shadowRoot).not.toBeNull()
+  })
+})
+```
 
-      - **br-component/**: Uma pasta específica para o componente `br-component`.
+Para mais informações sobre testes no Stencil, consulte a [documentação oficial](https://stenciljs.com/docs/testing-overview).
 
-        - **index.js**: Arquivo com paga executar ações nos exemplos, como escutar por eventos.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-        - **exemplo.html**: Arquivos com o código de cada exemplo.
+## VSCODE
 
-  - **utils/**: Pasta para utilitários ou funções auxiliares que podem ser usadas em todo o projeto.
-  -
-  - **index.html**: Página inicial do servidor de desenvolvimento.
+Durante o desenvolvimento de nossos Web Components, utilizamos custom elements. O VSCODE, por padrão, não reconhece esses componentes, o que impede sugestões inteligentes no autocomplete. Para resolver isso, geramos um arquivo `vscode-data.json` com as definições dos componentes, que é disponibilizado junto ao pacote npm.
 
-#### Arquivos de Configuração
+Para importar no seu VSCODE, adicione o seguinte campo, ajustando o caminho para o local onde o `node_modules` está armazenado no seu projeto:
 
-- **stencil.config.ts**: O principal arquivo de configuração para um projeto Stencil. Nele, você define opções de configuração como saída do build, plugins, global scripts, e outras opções.
+```json
+{
+  "html.customData": ["./node_modules/@govbr-ds/webcomponents/dist/webcomponents/dist/webcomponents.html-custom-data.json"]
+}
+```
 
-- **package.json**: Contém as dependências do projeto e scripts úteis para construir e desenvolver os componentes.
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
-- **tsconfig.json**: Arquivo de configuração do TypeScript que especifica as opções do compilador TypeScript para o projeto.
+## Documentações Complementares 📖
 
-## Documentações Complementares 📚
+Consulte a seção sobre Web Components na nossa [Wiki](https://gov.br/ds/wiki/desenvolvimento/web-components) para obter mais informações sobre este projeto.
 
-Consulte a seção sobre Web Componente na nossa [Wiki](https://gov.br/ds/wiki/desenvolvimento/web-components) para obter mais informações sobre esse projeto.
+Para mais detalhes sobre a especificação de Web Components, recomendamos a consulta ao [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
 
-Para saber mais detalhes sobre a especificação Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
 ## Contribuindo 🤝
 
-Antes de abrir um Merge Request, por favor, leve em consideração as seguintes informações:
+Antes de abrir um Merge Request, considere as seguintes orientações:
+
+- Este é um projeto open-source, e contribuições são sempre bem-vindas.
+- Para facilitar a aprovação da sua contribuição, utilize um título claro e explicativo no MR e siga os padrões descritos em nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
+- Deseja contribuir? Consulte o nosso guia [como contribuir](https://gov.br/ds/wiki/comunidade/contribuindo-com-o-ds/ 'Como contribuir?').
 
-- Este é um projeto open-source e contribuições são bem-vindas.
-- Para facilitar a aprovação da sua contribuição, use um título claro e explicativo para o MR, e siga os padrões estabelecidos em nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
-- Quer contribuir? Consulte o nosso guia [como contribuir](https://gov.br/ds/wiki/comunidade/contribuindo-com-o-ds/ 'Como contribuir?').
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
 ## Reportar Bugs/Problemas ou Sugestões 🐛
 
-Para reportar problemas ou sugerir melhorias, abra uma [issue](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/issues/new). Utilize o modelo adequado e forneça o máximo de detalhes possível.
+Caso encontre problemas ou tenha sugestões de melhorias, abra uma [issue](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/issues/new). Utilize o modelo apropriado e forneça o máximo de detalhes possível.
 
 Nos comprometemos a responder a todas as issues.
 
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
+
 ## Commits 📝
 
-Este projeto segue um padrão para branches e commits. Consulte a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender mais sobre esses padrões.
+Este projeto segue um padrão específico para branches e commits. Consulte a documentação em nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para entender mais sobre esses padrões.
+
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
 
 ## Precisa de ajuda? 🆘
 
-Por favor, **não** crie issues para perguntas gerais.
+Por favor, **não** crie issues para dúvidas gerais.
 
-Use os canais abaixo para tirar suas dúvidas:
+Utilize os canais abaixo para esclarecer suas dúvidas:
 
 - Site do GovBR-DS [http://gov.br/ds](http://gov.br/ds)
 - Web Components [https://gov.br/ds/webcomponents](https://gov.br/ds/webcomponents)
 - Canal no Discord [https://discord.gg/U5GwPfqhUP](https://discord.gg/U5GwPfqhUP)
 
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>
+
 ## 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 colaboração com a comunidade.
+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.
+
+<p align="right">(<a href="#readme-top">ir para cima</a>)</p>

package/dist/cjs/app-globals-DcqHuMBv.js

@@ -0,0 +1,12 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+//# sourceMappingURL=app-globals-DcqHuMBv.js.map
+
+//# sourceMappingURL=app-globals-DcqHuMBv.js.map

package/dist/cjs/app-globals-DcqHuMBv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-DcqHuMBv.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":";;;;;;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}