@govbr-ds/webcomponents 2.0.0-next.27 → 2.0.0-next.29

package/www/assets/stencil-generated-docs/avatar/sections/migrate.md

@@ -0,0 +1,111 @@
+## Guia de Migração de Web Components da 1.x (em Vue) para 2.x (em Stencil)
+
+### Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados, conforme abaixo:
+
+| Propriedade Vue | Propriedade Stencil | Descrição                                                 | Tipo                             | Padrão       |
+| --------------- | ------------------- | --------------------------------------------------------- | -------------------------------- | ------------ |
+| `density`       | `density`           | Define os níveis de densidade para o elemento avatar      | `'small' \| 'medium' \| 'large'` | `'medium'`   |
+| `iconic`        | `iconic`            | Define que o avatar apresentado será do tipo ícone        | `boolean`                        | `false`      |
+| `image`         | `image`             | Define que o avatar apresentado será do tipo fotográfico  | `string`                         | `undefined`  |
+| `name`          | `name`              | Nome do usuário que será apresentado no avatar pela letra | `string`                         | `'John Doe'` |
+
+### Eventos
+
+Entenda melhor como utilizar os eventos para o componente `<br-avatar></br-avatar>` no Vue e em StencilJS:
+
+#### Vue
+
+- Evento `click`: Evento emitido quando o avatar é clicado.
+
+Exemplo:
+
+```html
+<br-avatar id="avatar-exemplo" name="John Doe"></br-avatar>
+```
+
+Adicionando o listener de evento:
+
+```javascript
+document.getElementById('avatar-exemplo').addEventListener('click', (e) => {
+  console.log('Avatar clicado')
+})
+```
+
+#### StencilJS
+
+- Usando eventos em JSX: Automaticamente inclui o prefixo "on". Por exemplo, se o evento emitido for chamado `avatarClick`, a propriedade será chamada `onAvatarClick`.
+
+```html
+<!-- StencilJS -->
+<br-avatar onClick="handleAvatarClick"></br-avatar>
+```
+
+- Ouvindo eventos de um elemento não JSX:
+
+```html
+<template>
+  <br-avatar></br-avatar>
+</template>
+
+<script>
+  const avatarElement = document.querySelector('br-avatar')
+  avatarElement.addEventListener('click', (event) => {
+    /* seu listener */
+  })
+</script>
+```
+
+| Evento                    | Descrição                                                                                                 |
+| ------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `brComponentDidLoad`      | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentDidRender`    | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentDidUpdate`    | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentShouldUpdate` | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentWillLoad`     | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentWillRender`   | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentWillUpdate`   | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brConnectedCallback`     | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brDisconnectedCallback`  | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+
+## Métodos
+
+- `renderImageOrIcon()`: Método auxiliar que decide se deve renderizar uma imagem, um ícone ou a inicial do nome.
+
+```javascript
+<script>const avatarElement = document.querySelector('br-avatar'); avatarElement.renderImageOrIcon();</script>
+```
+
+### Estilos
+
+Se você estiver usando estilos personalizados, é importante notar que nossos componentes em Stencil utilizam Shadow DOM por padrão. Isso garante que os estilos internos dos componentes sejam isolados e não sejam afetados pelos estilos da aplicação que os utiliza, proporcionando um comportamento consistente e previsível.
+
+### Exemplo Completo
+
+Exemplo completo de como usar um componente Avatar em uma aplicação Web.
+
+```html
+<template>
+  <br-avatar
+    id="avatar-01"
+    name="Jane Doe"
+    image="path/to/image.jpg"
+    density="large"
+    onClick="handleAvatarClick"
+  ></br-avatar>
+</template>
+<script>
+  export default {
+    methods: {
+      handleAvatarClick(event) {
+        console.log('Avatar clicado: ', event)
+      },
+    },
+  }
+</script>
+```
+
+### Considerações Finais
+
+Caso encontre algum problema durante a migração ou surjam dúvidas, entre em contato com a equipe do [Padrão Digital de Governo](https://discord.gg/NkaVZERAT7).

package/www/assets/stencil-generated-docs/button/dependencies.md

@@ -0,0 +1,26 @@
+## Dependências
+
+### Usado por
+
+ - [br-input](../input)
+ - [br-message](../message)
+ - [br-tag](../tag)
+ - [br-upload](../upload)
+
+### Gráfico
+```mermaid
+graph TD;
+  br-input --Depende---> br-button
+  click br-button "src/components/button" "Link para a documentação do componente button"
+  class br-button depComponent
+  br-message --Depende---> br-button
+  click br-button "src/components/button" "Link para a documentação do componente button"
+  class br-button depComponent
+  br-tag --Depende---> br-button
+  click br-button "src/components/button" "Link para a documentação do componente button"
+  class br-button depComponent
+  br-upload --Depende---> br-button
+  click br-button "src/components/button" "Link para a documentação do componente button"
+  class br-button depComponent
+  class br-button mainComponent
+```

package/www/assets/stencil-generated-docs/button/examples/color-mode.html

@@ -0,0 +1,7 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-button id="active" emphasis="primary" color-mode="dark">Ênfase Primária</br-button>
+  <br-button id="active" emphasis="secondary" color-mode="dark">Ênfase Secundária</br-button>
+  <br-button id="active" color-mode="dark">Ênfase Terciária</br-button>
+  <br-button id="active" emphasis="primary" is-active color-mode="dark">Ativo</br-button>
+  <br-button id="active" emphasis="primary" disabled color-mode="dark">Desabilitado</br-button>
+</div>

package/www/assets/stencil-generated-docs/button/examples/density.html

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-button id="small" emphasis="secondary" density="small">Densidade Alta</br-button>
+  <br-button id="medium" emphasis="primary">Densidade Padrão</br-button>
+  <br-button id="large" emphasis="secondary" density="large">Densidade Baixa</br-button>
+</div>

package/www/assets/stencil-generated-docs/button/examples/emphasis.html

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-button id="primary" emphasis="primary">Primária</br-button>
+  <br-button id="secondary" emphasis="secondary">Secundária</br-button>
+  <br-button id="tertiary">Terciária</br-button>
+</div>

package/www/assets/stencil-generated-docs/button/examples/icon-position.html

@@ -0,0 +1,10 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-button emphasis="primary">
+    <br-icon icon-name="fa6-solid:city"></br-icon>
+    Ícone à esquerda
+  </br-button>
+  <br-button emphasis="secondary">
+    Ícone à Direita
+    <br-icon icon-name="fa6-solid:phone"></br-icon>
+  </br-button>
+</div>

package/www/assets/stencil-generated-docs/button/examples/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-button')
+  const eventsToListen = ['click']
+  window.elementsToListen = true
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Evento: event.type,
+          Elemento: domElement.outerHTML,
+          ...(event.detail && { Detail: event.detail }),
+          ...(event.data && { Data: event.data }),
+        })
+      })
+    })
+  })
+}

package/www/assets/stencil-generated-docs/button/examples/shape.html

@@ -0,0 +1,7 @@
+<br-button id="block" emphasis="secondary" shape="block">Bloco</br-button>
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-button id="circle" emphasis="primary" shape="circle" aria-label="Ícone ilustrativo">
+    <br-icon icon-name="fa6-solid:city"></br-icon>
+  </br-button>
+  <br-button id="block" emphasis="secondary" shape="pill">Pílula</br-button>
+</div>

package/www/assets/stencil-generated-docs/button/examples/state.html

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-button id="active" emphasis="secondary" is-active>Ativo</br-button>
+  <br-button id="disabled" emphasis="secondary" disabled>Desabilitado</br-button>
+  <br-button id="loading" emphasis="secondary" is-loading>Loading</br-button>
+</div>

package/www/assets/stencil-generated-docs/button/overview.md

@@ -0,0 +1,3 @@
+## Visão Geral
+
+Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).

package/www/assets/stencil-generated-docs/button/props.md

@@ -0,0 +1,14 @@
+## Propriedades
+
+| Propriedade | Atributo     | Descrição                                                                                                                                                                                                                    | Tipo                                     | Valor padrão                  |
+| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------- |
+| `colorMode` | `color-mode` | Define se o botão usará um esquema de cores escuro.                                                                                                                                                                          | `"dark"`                                 | ---                           |
+| `customId`  | `custom-id`  | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.                                                                                                                                       | `string`                                 | ```br-button-${buttonId++}``` |
+| `density`   | `density`    | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.                                                                                                                          | `"large" \| "medium" \| "small"`         | `'medium'`                    |
+| `disabled`  | `disabled`   | Desativa o botão, tornando-o não interativo.                                                                                                                                                                                 | `boolean`                                | `false`                       |
+| `emphasis`  | `emphasis`   | Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.                                                                                                                 | `"primary" \| "secondary" \| "tertiary"` | ---                           |
+| `isActive`  | `is-active`  | Indica se o botão está no estado ativo. Se definido como verdadeiro, o botão será exibido como ativo.                                                                                                                        | `boolean`                                | `false`                       |
+| `isLoading` | `is-loading` | Aplica o estado de "progresso" ao botão. O botão exibirá um indicador de carregamento ou progresso.                                                                                                                          | `boolean`                                | `false`                       |
+| `shape`     | `shape`      | Define o formato do botão. Valores possíveis: - 'circle': Botão com formato circular. - 'block': Botão com formato ovalado ocupando toda a largura disponível. - 'pill': Botão com formato ovalado, com bordas arredondadas. | `"block" \| "circle" \| "pill"`          | ---                           |
+| `type`      | `type`       | Define o tipo de botão, especificando seu comportamento padrão. Valores possíveis: - 'button': Um botão padrão. - 'reset': Um botão para redefinir o formulário. - 'submit': Um botão para enviar o formulário.              | `"button" \| "reset" \| "submit"`        | ---                           |
+| `value`     | `value`      | Define o valor inicial do botão em um formulário.                                                                                                                                                                            | `string`                                 | ---                           |

package/www/assets/stencil-generated-docs/button/sections/migrate.md

@@ -0,0 +1,25 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+### Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados, conforme abaixo:
+
+#### Propriedades retiradas na versão 2.x
+
+| Propriedade | Descrição                                    | Tipo      | Padrão  |
+| ----------- | -------------------------------------------- | --------- | ------- |
+| `block`     | Usado para dar o formato de bloco ao botão   | `boolean` | `false` |
+| `circle`    | Usado para dar o formato de círculo ao botão | `boolean` | `false` |
+| `type`      | Usado para definir a ênfase do botão         | `string`  | `null`  |
+
+#### Propriedades incluídas na versão 2.x
+
+| Propriedade | Descrição                  | Tipo                               | Padrão      |
+| ----------- | -------------------------- | ---------------------------------- | ----------- |
+| `emphasis`  | Informa a ênfase do botão  | `primary \| secondary \| tertiary` | `tertiary`  |
+| `shape`     | Informa o formato do botão | `'circle \| block \| pill`         | `pill`      |
+| `type`      | Informa o tipo do botão    | `button \| reset \| submit`        | `undefined` |
+
+### Considerações Finais
+
+Caso encontre algum problema durante a migração ou surjam dúvidas, entre em contato com a equipe do [Padrão Digital de Governo](https://discord.gg/NkaVZERAT7).

package/www/assets/stencil-generated-docs/button/slots.md

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                             |
+| ----------- | --------------------------------------------------------------------- |
+| `"default"` | Espaço de conteúdo do button. Geralmente usado para incluir o rótulo. |

package/www/assets/stencil-generated-docs/checkbox/dependencies.md

@@ -0,0 +1,18 @@
+## Dependências
+
+### Usado por
+
+ - [br-checkgroup](../checkgroup)
+ - [br-select](../select)
+
+### Gráfico
+```mermaid
+graph TD;
+  br-checkgroup --Depende---> br-checkbox
+  click br-checkbox "src/components/checkbox" "Link para a documentação do componente checkbox"
+  class br-checkbox depComponent
+  br-select --Depende---> br-checkbox
+  click br-checkbox "src/components/checkbox" "Link para a documentação do componente checkbox"
+  class br-checkbox depComponent
+  class br-checkbox mainComponent
+```

package/www/assets/stencil-generated-docs/checkbox/events.md

@@ -0,0 +1,6 @@
+## Eventos
+
+| Evento                | Descrição                                                     | Tipo                   |
+| --------------------- | ------------------------------------------------------------- | ---------------------- |
+| `checkedChange`       | Disparado depois que o valor do `checked` foi alterado        | `CustomEvent<boolean>` |
+| `indeterminateChange` | Disparado depois que o valor do `indeterminate` foi alterado. | `CustomEvent<boolean>` |

package/www/assets/stencil-generated-docs/checkbox/examples/hidden-label.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-checkbox id="checkbox-1" name="checkbox-1" has-hidden-label label="Hidden Label"></br-checkbox>
+</div>

package/www/assets/stencil-generated-docs/checkbox/examples/horizontal.html

@@ -0,0 +1,5 @@
+<div class="d-flex justify-content-evenly mt-5">
+  <br-checkbox id="ckb-1" name="h-checkbox-1" label="Horizontal 1"></br-checkbox>
+  <br-checkbox id="ckb-2" name="h-checkbox-2" label="Horizontal 2"></br-checkbox>
+  <br-checkbox id="ckb-3" name="h-checkbox-3" label="Horizontal 3"></br-checkbox>
+</div>

package/www/assets/stencil-generated-docs/checkbox/examples/indeterminate.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-checkbox id="indeterminate01" name="indeterminate01" indeterminate label="Indeterminate"></br-checkbox>
+</div>

package/www/assets/stencil-generated-docs/checkbox/examples/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-checkbox')
+  const eventsToListen = ['click', 'checkedChange']
+  window.elementsToListen = true
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Evento: event.type,
+          Elemento: domElement.outerHTML,
+          ...(event.detail && { Detail: event.detail }),
+          ...(event.data && { Data: event.data }),
+        })
+      })
+    })
+  })
+}

package/www/assets/stencil-generated-docs/checkbox/examples/slotted.html

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-checkbox id="slotted" name="slotted">
+    <span>Clique para aceitar os <a url="#">Termos de Aceite</a></span>
+  </br-checkbox>
+</div>

package/www/assets/stencil-generated-docs/checkbox/examples/state.html

@@ -0,0 +1,19 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-checkbox class="mb-1" id="check-state-checked" name="check-state-checked" checked label="Marcado"></br-checkbox>
+  <br-checkbox class="mb-1" id="check-state-unchecked" name="check-state-unchecked" label="Não marcado"></br-checkbox>
+  <br-checkbox
+    class="mb-1"
+    id="check-state-disabled"
+    name="check-state-disabled"
+    disabled
+    label="Desativado"
+  ></br-checkbox>
+  <br-checkbox
+    class="mb-1"
+    id="check-state-invalid"
+    name="check-state-invalid"
+    state="invalid"
+    label="Inválido"
+  ></br-checkbox>
+  <br-checkbox id="check-state-valid" name="check-state-valid" state="valid" label="Válido"></br-checkbox>
+</div>

package/www/assets/stencil-generated-docs/checkbox/examples/vertical.html

@@ -0,0 +1,12 @@
+<div class="d-flex flex-column flex-wrap justify-content-evenly mt-5 p-4">
+  <br-checkbox
+    class="mb-1"
+    id="checkbox-1"
+    autofocus
+    name="checkbox-1"
+    label="Vertical 1"
+    aria-label="Vertical 1"
+  ></br-checkbox>
+  <br-checkbox class="mb-1" id="checkbox-2" name="checkbox-2" label="Vertical 2" aria-label="Vertical 2"></br-checkbox>
+  <br-checkbox id="checkbox-3" name="checkbox-3" label="Vertical 3" aria-label="Vertical 3"></br-checkbox>
+</div>

package/www/assets/stencil-generated-docs/checkbox/methods.md

@@ -0,0 +1,25 @@
+## Métodos
+
+### `setIndeterminate(value: boolean) => Promise<void>`
+
+Define o estado indeterminado do checkbox.
+
+#### Parâmetros
+
+| Nome    | Tipo      | Descrição                               |
+| ------- | --------- | --------------------------------------- |
+| `value` | `boolean` | Novo valor para o estado indeterminado. |
+
+#### Retorna
+
+Tipo: `Promise<void>`
+
+
+
+### `toggleChecked() => Promise<void>`
+
+Inverte o valor da prop `checked`
+
+#### Retorna
+
+Tipo: `Promise<void>`

package/www/assets/stencil-generated-docs/checkbox/overview.md

@@ -0,0 +1,3 @@
+## Visão Geral
+
+Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/checkbox?tab=designer).

package/www/assets/stencil-generated-docs/checkbox/props.md

@@ -0,0 +1,13 @@
+## Propriedades
+
+| Propriedade            | Atributo           | Descrição                                                                                                                                                                                                                                                                                                                                                                               | Tipo                   | Valor padrão                      |
+| ---------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------- |
+| `checked`              | `checked`          | Define o estado de seleção do checkbox. Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.                                                                                                                                                                                                                                                      | `boolean`              | `false`                           |
+| `customId`             | `custom-id`        | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.                                                                                                                                                                                                                                                                                                  | `string`               | ```br-checkbox-${checkboxId++}``` |
+| `disabled`             | `disabled`         | Desativa o checkbox, tornando-o não interativo.                                                                                                                                                                                                                                                                                                                                         | `boolean`              | `false`                           |
+| `hasHiddenLabel`       | `has-hidden-label` | Define se o label associado ao checkbox deve ser oculto. Se definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.                                                                                                                                                                                                                    | `boolean`              | `false`                           |
+| `indeterminate`        | `indeterminate`    | Define o estado intermediário do checkbox. Se definido como verdadeiro, o checkbox exibirá um estado intermediário, que é um estado visual que indica que a opção está parcialmente selecionada. Este estado é útil quando o checkbox faz parte de um grupo com seleção parcial. Este estado será resetado automaticamente ao clicar no checkbox, alterando para marcado ou desmarcado. | `boolean`              | `false`                           |
+| `label`                | `label`            | Texto descritivo exibido à direita do checkbox. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.                                                                                                                                                                                                                                | `string`               | ---                               |
+| `name` *(obrigatório)* | `name`             | Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.                                                                                                                                                                               | `string`               | ---                               |
+| `state`                | `state`            | Indica a validade do checkbox. Valores possíveis: 'valid': O checkbox é considerado válido. 'invalid': O checkbox é considerado inválido. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.                                                                                                                                                  | `"invalid" \| "valid"` | ---                               |
+| `value`                | `value`            | Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o checkbox está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o checkbox está selecionado; para verificar o estado de seleção, use a propriedade `checked`.                                              | `string`               | ---                               |

package/www/assets/stencil-generated-docs/checkbox/sections/migrate.md

@@ -0,0 +1,132 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+### Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados, conforme abaixo:
+
+| Propriedade Vue     | Propriedade Stencil    | Descrição                                                                | Tipo      | Padrão      |
+| ------------------- | ---------------------- | ------------------------------------------------------------------------ | --------- | ----------- |
+| `dataChild`         | `checkgroupChild`      | Declara o comportamento checkgroup e coloca o checkbox como sendo filho. | `string`  | `undefined` |
+| `dataParent`        | `checkgroupParent`     | Declara o comportamento checkgroup e coloca o checkbox como sendo pai.   | `string`  | `undefined` |
+| `inline`            | --                     | Formata o componente para versão horizontal.                             | `boolean` | `false`     |
+| `invalid`           | `format`               | Estado indicativo de que uma opção não é válida.                         | `boolean` | `false`     |
+| `name` *(opcional)* | `name` *(obrigatório)* | Agora obrigatório, define o name que será atribuído ao checkbox.         | `string`  | `undefined` |
+| `valid`             | `format`               | Estado indicativo de que a opção é válida.                               | `boolean` | `false`     |
+
+### Eventos
+
+Entenda melhor como utilizar os eventos para o componente `<br-checkbox></br-checkbox>` no Vue e em Stencil:
+
+#### Vue
+
+- Evento *`onChange`*: Evento emitido quando o estado do checkbox é modificado.
+
+- Evento *`update:checked`*: Evento emitido para fazer o two-way data binding com a prop checked.
+
+Exemplo:
+
+```html
+<br-checkbox id="checkbox-exemplo" label="teste"> </br-checkbox>
+```
+
+Adicionando o listener de evento:
+
+```javascript
+document.getElementById('checkbox-exemplo').addEventListener('update:checked', (e) => {
+  const checkedCheckbox = e.detail[0]
+  console.log('O checkbox ' + checkedCheckbox.label + ' foi checado.')
+})
+```
+
+#### StencilJS
+
+- *Usando eventos em JSX*: Automaticamente inclui o prefixo "on". Por exemplo, se o evento emitido for chamado `checkedChange`, a propriedade será chamada `onCheckedChange`.
+
+```html
+<!-- StencilJS -->
+<br-checkbox onEventoPersonalizado="handleEvent"></br-checkbox>
+```
+
+- *Ouvindo eventos de um elemento não JSX*: Ver exemplo abaixo:
+
+```html
+<template>
+  <br-checkbox></br-checkbox>
+</template>
+
+<script>
+  const checkboxElement = document.querySelector('br-checkbox')
+  checkboxElement.addEventListener('checkedChange', (event) => {
+    /* your listener */
+  })
+</script>
+```
+
+| Evento                      | Descrição                                                                                                 |
+| --------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `brComponentDidLoad`        | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentDidRender`      | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentDidUpdate`      | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentShouldUpdate`   | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentWillLoad`       | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentWillRender`     | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brComponentWillUpdate`     | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brConnectedCallback`       | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `brDisconnectedCallback`    | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+| `checkedChange`             | Evento emitido quando o checkbox é marcado ou desmarcado.                                                 |
+| `formAssociatedCallback`    | Componente foi inserido em um `<form>`                                                                    |
+| `formDisassociatedCallback` | Componente foi removido de um `<form>`                                                                    |
+
+### Métodos
+
+- `toggleChecked()`: é método público acessível que alterna o estado de uma variável boolean entre true e false. Veja como exemplo, o método é chamado após 2 segundos usando setTimeout():
+
+```javascript
+<script>const checkbox = document.querySelector('my-checkbox'); checkbox.toggleChecked(); }, 2000);</script>
+```
+
+### Slots
+
+Foi criado o slot `label` no StencilJs, que permite a personalização do rótulo associado ao checkbox.
+
+```html
+<!-- StencilJS -->
+<br-checkbox>
+  <br-checkbox name="checkbox-1">
+    <span slot="label">Clique para aceitar os <a url="#">Termos de Aceite</a></span> //Conteúdo do slot
+  </br-checkbox>
+</div>
+```
+
+### Estilos
+
+Se você estiver usando estilos personalizados, é importante notar que nossos componentes em Stencil utilizam Shadow DOM por padrão. Isso garante que os estilos internos dos componentes sejam isolados e não sejam afetados pelos estilos da aplicação que os utiliza, proporcionando um comportamento consistente e previsível.
+
+### Exemplo Completo
+
+Exemplo completo de como usar um componente Checkbox em uma aplicação Web.
+
+```html
+<template>
+  <br-checkbox
+    id="cbx-01"
+    name="cbx-01"
+    label="Opção 1"
+    aria-label="opção 1"
+    onCheckedChange="handleEvent"
+  ></br-checkbox>
+</template>
+<script>
+  export default {
+    methods: {
+      handleEvent(event) {
+        console.log(event.detail)
+      },
+    },
+  }
+</script>
+```
+
+### Considerações Finais
+
+Caso encontre algum problema durante a migração ou surjam dúvidas, entre em contato com a equipe do [Padrão Digital de Governo](https://discord.gg/NkaVZERAT7).

package/www/assets/stencil-generated-docs/checkbox/slots.md

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                                |
+| ----------- | ------------------------------------------------------------------------ |
+| `"default"` | O texto descritivo pode ser passado por propriedade (label) ou por slot. |

package/www/assets/stencil-generated-docs/checkgroup/dependencies.md

@@ -0,0 +1,14 @@
+## Dependências
+
+### Depende de
+
+- [br-checkbox](../checkbox)
+
+### Gráfico
+```mermaid
+graph TD;
+  br-checkgroup --Depende---> br-checkbox
+  click br-checkbox "src/components/checkbox" "Link para a documentação do componente checkbox"
+  class br-checkbox depComponent
+  class br-checkgroup mainComponent
+```

package/www/assets/stencil-generated-docs/checkgroup/examples/checkgroup.html

@@ -0,0 +1,6 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-checkgroup label="Lista de opções" label-selecionado="Selecionar tudo" label-desselecionado="Desselecionar tudo">
+    <br-checkbox id="ckb-1" name="h-checkbox-1" label="Opção 1" class="mb-1"></br-checkbox>
+    <br-checkbox id="ckb-2" name="h-checkbox-2" label="Opção 2"></br-checkbox>
+  </br-checkgroup>
+</div>

package/www/assets/stencil-generated-docs/checkgroup/examples/concatenation.html

@@ -0,0 +1,15 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-checkgroup label="Grupo Principal" label-selecionado="Selecionar tudo" label-desselecionado="Desselecionar tudo">
+    <br-checkbox id="p2-f1" name="p2-f1" label="Opção 1" class="mb-1"></br-checkbox>
+    <br-checkbox id="p2-f2" name="p2-f2" label="Opção 2" class="mb-1"></br-checkbox>
+
+    <br-checkgroup
+      label="Selecionar grupo"
+      label-selecionado="Selecionar grupo"
+      label-desselecionado="Desselecionar grupo"
+    >
+      <br-checkbox id="p2-f3-1" name="p2-f3-1" label="Opção 3" class="mb-1"></br-checkbox>
+      <br-checkbox id="p2-f3-2" name="p2-f3-2" label="Opção 4" class="mb-1"></br-checkbox>
+    </br-checkgroup>
+  </br-checkgroup>
+</div>

package/www/assets/stencil-generated-docs/checkgroup/examples/index.js

@@ -0,0 +1,20 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-checkgroup')
+
+  const eventsToListen = ['click', 'change', 'brDidAllCheckboxesSelected']
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      console.log('Event:', event)
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Elemento: domElement,
+          Evento: event,
+          Tipo: event.type,
+          'Data(Native Events)': event.data,
+          'Detail(Custom Events)': event.detail,
+        })
+      })
+    })
+  })
+}

package/www/assets/stencil-generated-docs/checkgroup/overview.md

@@ -0,0 +1,3 @@
+## Visão Geral
+
+Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/utilitarios/js/checkgroup?tab=desenvolvedor).