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

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

@@ -1,111 +0,0 @@
-## 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

@@ -1,26 +0,0 @@
-## 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

@@ -1,7 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-## 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

@@ -1,14 +0,0 @@
-## 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

@@ -1,25 +0,0 @@
-## 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

@@ -1,5 +0,0 @@
-## 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

@@ -1,18 +0,0 @@
-## 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

@@ -1,6 +0,0 @@
-## 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

@@ -1,3 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-## 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

@@ -1,3 +0,0 @@
-## 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

@@ -1,13 +0,0 @@
-## 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

@@ -1,132 +0,0 @@
-## 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

@@ -1,5 +0,0 @@
-## 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

@@ -1,14 +0,0 @@
-## 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

@@ -1,6 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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

@@ -1,3 +0,0 @@
-## 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).