@govbr-ds/webcomponents 2.0.0-next.3 → 2.0.0-next.30

package/README.md

@@ -1,157 +1,339 @@
 # Web Components GovBR-DS
 
-Nosso objetivo é disponibilizar uma biblioteca de componentes baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') que possa ser consumida independente de frameworks ou tecnologias utilizadas nos projetos.
+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/).
 
-## Demonstração
+## Demonstração 🚀
 
-Acesse nossos sites e veja nossos componentes em ação:
+Veja nossos componentes em funcionamento:
 
-- [Storybook - Produção](https://gov.br/ds/webcomponents/)
-- [Storybook - Desenvolvimento](https://govbr-ds.gitlab.io/wbc/govbr-ds-wbc/)
+- [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/)
 
-## Tecnologias
+## Tecnologias 💻
 
 Esse projeto é desenvolvido usando:
 
 1. [GovBR-DS](https://gov.br/ds/ 'GovBR-DS')
-2. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
-3. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
-4. [VueJS 3](https://v3.vuejs.org/ 'VueJS 3')
-5. [Storybook](https://storybook.js.org/ 'Storybook')
-6. [Jest](https://jestjs.io/ 'Jest')
+1. [Stencil](https://stenciljs.com/ 'Stencil')
+1. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
+1. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
+1. [NX Monorepo](https://nx.dev/ 'NX Monorepo')
 
-> Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
+## O que são Web Components?
 
-## Documentações Complementares
+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.
 
-Consulte nossa a seção sobre Web Componente na nossa [Wiki](https://govbr-ds.gitlab.io/tools/wiki/hugo-cms/desenvolvimento/web-components) para obter mais informações.
+O diagrama mostra os três componentes principais dos Web Components:
 
-## Uso
+- 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.
 
-Existem 2 maneiras de usar nossos Web Components:
+### Benefícios dos Web Components
 
-- Pacote NPM
+1. Reusabilidade
+1. Modularidade
+1. Encapsulamento
+1. Compatibilidade
+1. Manutenibilidade
+
+### 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
+
+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.
+
+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).
+
+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.
+
+## Font Awesome e Fonte Rawline
+
+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.
+
+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.
+
+## Instalação ⚙️
+
+Instale o pacote abaixo:
+
+```bash
+npm install --save-dev @govbr-ds/webcomponents
+```
+
+## Scripts Disponíveis 📜
+
+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:
+
+```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
+```
+
+Executa os testes unitários.
 
 ```bash
-npm install --save @govbr-ds/webcomponents
+nx lint:tsx webcomponents
+```
+
+Executa lint nos códigos TypeScript.
+
+```bash
+nx lint:md webcomponents
+```
+
+Executa lint nos arquivos markdown.
+
+```bash
+nx lint:styles webcomponents
+```
+
+Executa lint nos arquivos de estilos.
+
+## Testes
+
+Nossa estratégia de testes é dividida em duas abordagens principais: testes unitários e testes end-to-end (E2E).
+
+### Testes Unitários (\*.spec.tsx)
+
+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:
+
+- 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.
+
+```typescript
+it('deve inicializar com o estado padrão padrão', async () => {
+  const page = await newSpecPage({
+    components: [BrComponent],
+    html: `<br-component></br-component>`,
+  })
+  expect(page.root).toEqualHtml(`<br-component>...</br-component>`)
+})
+```
+
+### 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
+
+```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()
+})
+```
+
+Para mais detalhes sobre testes no Stencil, consulte a [documentação oficial](https://stenciljs.com/docs/testing-overview).
+
+## Configuração 🛠️
+
+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:
+
+### Adicione os tokens do `@govbr-ds/core`
+
+```ts
+import 'node_modules/@govbr-ds/core/dist/core-tokens.min.css'
 ```
 
+### 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/webcomponents.umd.min.js"
+@import "node_modules/@govbr-ds/webcomponents/dist/loader"
 ```
 
-- CDN
+Também é possível importar o JS da biblioteca usando um CDN (não mantido por nossa equipe):
 
 ```html
-<script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@<VERSÃO>/dist/loader/index.js"></>
 ```
 
-> Troque **versão** pela versão do pacote que deseja
+**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.
 
-**Importante**: O CDN <https://unpkg.com/> não é mantido por nossa equipe e portanto não podemos garantir um SLO. Considere importar os arquivos necessários para uma infraestrutura interna caso isso seja um impedimento para seu projeto.
+### Use as tags dos custom elements
 
-### Font Awesome e Fonte Rawline
+```html
+<br-button>Click aqui</br-button>
+```
 
-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.
+### Eventos
 
-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.
+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.
+
+```html
+<br-button>Label</br-button>
+
+<script>
+  const button = document.querySelector('br-button')
+  button.addEventListener('click', (event) => {
+    console.log('Botão foi clicado')
+  })
+</script>
+```
+
+## 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.
+
+Para importar no seu VSCODE, adicione o campo abaixo alterando o local onde o seu projeto armazena o `node_modules`.
+
+```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:
+
+- 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.
 
 ### Exemplos de uso
 
-Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/dev/wbc 'GovBR-DS/DEV/WBC') e procure pelos projetos de 'Quickstart' para mais detalhes.
+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.
 
-## Estrutura de pastas
+## Arquitetura do Projeto Stencil
 
-> Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
+### Estrutura do Projeto
 
 ```markdown
-/raiz
-└───src
-│───library
-│ │───lib.js
-│ │───components
-│ │───mixins
-│ └───util
-└───stories
+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
 ```
 
-- **src**
-  - **assets**: pasta com arquivos estáticos
-  - **library**
-    - **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
-    - **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
-    - **mixins**: mixins que são usados em vários componentes.
-    - **util**: funções criadas para facilitar ações dentro dos componentes
-  - **stories**: Arquivos com as stories gerais do storybook
+#### Descrição dos Diretórios
 
-> Aplicação Vue é uma aplicação criada para testar rapidamente nossos componentes. Ela não é disponibilizada no build e nem disponibilizamos um site com ela.
+- **src/**: Contém o código-fonte do projeto.
 
-## Rodar o projeto na máquina local
+  - **components/**: Contém os componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
 
-Clone o projeto:
+    - **br-component/**: Uma pasta específica para o componente `br-component`.
 
-```bash
-git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
+      - **sections/**: Pasta com arquivos markdown para serem incluídos no site.
 
-cd govbr-ds-wbc
+        - **migrate.md**: Arquivo explicando 'como migrar' o componente da versão anterior para a nova.
 
-npm install
+      - **test/**: Pasta com os arquivos de teste.
 
-npm run storybook
-```
+        - **br-component.e2e.ts**: Arquivo para testes end-to-end (E2E) do componente.
 
-## Documentação
+        - **br-component.spec.tsx**: Arquivo para testes unitários (Unit) do componente.
 
-Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
+      - **br-component.tsx**: O arquivo principal do componente, que contém a lógica e a estrutura do componente.
 
-> Para outras informações, consulte nossa [Wiki](https://gov.br/ds/wiki/desenvolvimento/web-components/).
+      - **br-component.scss**: O arquivo de estilo do componente.
 
-## Polyfill
+      - **readme.md**: Documentação gerada automaticamente do componente durante `build`.
 
-Acesse os seguintes links para entender mais sobre o suporte dos browsers a [Custom Elements](https://caniuse.com/custom-elementsv1) e a [Shadow Dom](https://caniuse.com/shadowdomv1).
+  - **pages/**: Contém os exemplos dos componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
 
-Caso os requisitos do seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os [polyfills](https://www.webcomponents.org/polyfills) ao seu projeto.
+    - **components/**: Pasta com os exemplos dos componentes.
 
-Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
+    - **scripts/**: Pasta com os scripts usados no ambiente de desenvolvimento.
 
-## Contribuindo
+      - **br-component/**: Uma pasta específica para o componente `br-component`.
 
-Antes de abrir um Merge Request tenha em mente algumas informações:
+        - **index.js**: Arquivo com paga executar ações nos exemplos, como escutar por eventos.
 
-- Esse é um projeto opensource e contribuições são bem-vindas.
-- Para facilitar a aprovação da sua contribuição, escolha um título curto, simples e explicativo para o MR, e siga os padrões da nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
-- Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
+        - **exemplo.html**: Arquivos com o código de cada exemplo.
 
-### Reportar bugs/necessidades
+  - **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.
 
-Você pode usar as [issues](https://gitlab.com/govbr-ds/dev/wbc/govbr-ds-wbc/-/issues/new) para nos informar os problemas que tem enfrentado ao usar nossa biblioteca ou mesmo o que gostaria que fizesse parte do projeto. Por favor use o modelo que mais se encaixa na sua necessidade e preencha com o máximo de detalhes possível.
+#### Arquivos de Configuração
 
-Nos comprometemos a responder a todas as issues.
+- **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.
+
+- **package.json**: Contém as dependências do projeto e scripts úteis para construir e desenvolver os componentes.
+
+- **tsconfig.json**: Arquivo de configuração do TypeScript que especifica as opções do compilador TypeScript para o projeto.
 
-## Commits
+## Documentações Complementares 📚
 
-Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender sobre os nossos padrões.
+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.
 
-## Precisa de ajuda?
+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').
 
-> Por favor **não** crie issues para fazer perguntas...
+## Contribuindo 🤝
 
-Use nossos canais abaixo para obter tirar suas dúvidas:
+Antes de abrir um Merge Request, por favor, leve em consideração as seguintes informações:
+
+- 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?').
+
+## 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.
+
+Nos comprometemos a responder a todas as issues.
 
-- Site do GovBR-DS <http://gov.br/ds>
+## Commits 📝
 
-- Web Components <https://gov.br/ds/webcomponents/>
+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.
 
-- Pelo nosso email <govbr-ds@serpro.gov.br>
+## Precisa de ajuda? 🆘
 
-- Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
+Por favor, **não** crie issues para perguntas gerais.
 
-## Créditos
+Use os canais abaixo para tirar suas dúvidas:
 
-Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') e [Dataprev](https://www.dataprev.gov.br/ 'Dataprev | Empresa de Tecnologia e Informações da Previdência') juntamente com a participação da comunidade.
+- 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)
 
-## Licença
+## Créditos 🎉
 
-Nesse projeto usamos a licença MIT.
+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.

package/package.json

@@ -1,111 +1,34 @@
 {
   "name": "@govbr-ds/webcomponents",
-  "version": "2.0.0-next.3",
-  "private": false,
-  "description": "Projeto de Webcomponents baseado no GovBR-DS",
+  "version": "2.0.0-next.30",
+  "description": "Biblioteca de Web Components baseado no GovBR-DS",
   "keywords": [
     "design system",
     "govbr-ds",
-    "web components",
-    "vue"
+    "web components"
   ],
   "homepage": "https://gov.br/ds/webcomponents",
   "bugs": {
-    "url": "https://gitlab.com/govbr-ds/dev/wbc/govbr-ds-wbc/issues"
+    "url": "https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git"
+    "url": "git@gitlab.com:govbr-ds/bibliotecas/wbc/govbr-ds-wbc.git"
   },
   "license": "MIT",
-  "author": "SERPRO <govbr-ds@serpro.gov.br> (http://serpro.gov.br/)",
-  "contributors": [
-    "Dataprev (https://portal3.dataprev.gov.br/)"
-  ],
-  "main": "dist/webcomponents.umd.min.js",
+  "author": "SERPRO (http://serpro.gov.br/)",
+  "main": "./dist/index.cjs.js",
+  "unpkg": "./dist/webcomponents/webcomponents.esm.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
   "files": [
-    "/dist/**/*",
-    "!/dist/*.html"
+    "dist/"
   ],
-  "scripts": {
-    "build": "vue-cli-service build --target lib --inline-vue --name webcomponents src/library/lib.js",
-    "build:storybook": "build-storybook -o public",
-    "commit": "git-cz",
-    "lint:js": "vue-cli-service lint --fix",
-    "lint:md": "markdownlint --fix **/*.md -d -c .markdownlint.yml",
-    "prepare": "chmod +x ./node_modules/husky/lib/bin.js && husky install",
-    "storybook": "start-storybook -p 6006",
-    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
-    "test:unit": "vue-cli-service test:unit --updateSnapshot"
-  },
-  "lint-staged": {
-    "*.md": [
-      "markdownlint -d -c .markdownlint.yml --fix **/*.md",
-      "prettier --write"
-    ],
-    "*.{js,ts,vue}": [
-      "vue-cli-service lint --fix",
-      "vue-cli-service test:unit --findRelatedTests",
-      "prettier --write"
-    ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "@commitlint/cz-commitlint"
-    }
-  },
-  "dependencies": {
-    "core-js": "3.30.1",
-    "maska": "^2.1.9",
-    "vue": "3.2.47",
-    "vuex": "^4.1.0"
+  "peerDependencies": {
+    "@govbr-ds/core": "^3.6.1"
   },
-  "devDependencies": {
-    "@babel/core": "7.21.8",
-    "@babel/eslint-parser": "7.21.8",
-    "@fullhuman/postcss-purgecss": "5.0.0",
-    "@fullhuman/vue-cli-plugin-purgecss": "5.0.0",
-    "@govbr-ds/commit-config": "latest",
-    "@govbr-ds/core": "3.3.1",
-    "@govbr-ds/release-config": "latest",
-    "@semantic-release/exec": "6.0.3",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/theming": "6.5.16",
-    "@storybook/vue3": "6.5.16",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-plugin-unit-jest": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/compiler-sfc": "3.2.47",
-    "@vue/eslint-config-prettier": "7.1.0",
-    "@vue/test-utils": "2.3.2",
-    "@vue/vue3-jest": "27.0.0",
-    "@whitespace/storybook-addon-html": "^5.1.4",
-    "babel-loader": "^8.3.0",
-    "eslint": "8.39.0",
-    "eslint-plugin-storybook": "0.6.12",
-    "eslint-plugin-vue": "9.11.0",
-    "git-pull-run": "1.4.0",
-    "husky": "8.0.3",
-    "jest-junit": "15.0.0",
-    "lint-staged": "13.2.2",
-    "markdownlint-cli": "0.34.0",
-    "postcss": "8.4.23",
-    "prettier": "^2.8.8",
-    "react": "16.8.0 || 17.0.0",
-    "react-dom": "16.8.0 || 17.0.0",
-    "sass": "1.58.3",
-    "sass-loader": "13.2.2",
-    "semantic-release-discord": "1.2.0",
-    "storybook-version": "^0.1.1",
-    "vue-loader": "^16.8.3",
-    "vue-router": "4.1.6",
-    "vue-syntax-highlight": "^0.1.8"
-  }
-}
+  "collection": "./dist/collection/collection-manifest.json",
+  "collection:main": "./dist/collection/index.js",
+  "es2015": "./dist/esm-es5/loader.js",
+  "es2017": "./dist/esm/loader.js"
+}