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

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

@@ -0,0 +1,42 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-message
+    state="success"
+    message-title="Success!"
+    message="Campo correto."
+    is-inline
+    is-closable
+    auto-remove
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  ></br-message>
+  <br-message
+    state="warning"
+    message-title="Warning!"
+    is-inline
+    auto-remove
+    message="This is a warning message."
+    is-closable
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  ></br-message>
+  <br-message
+    state="danger"
+    message-title="Error!"
+    is-inline
+    message="Something went wrong."
+    is-closable
+    auto-remove
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  ></br-message>
+  <br-message
+    message-title="Informação."
+    is-inline
+    is-closable
+    auto-remove
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  >
+    <span>Seus dados só serão salvos após o preenchimento do primeiro campo do formulário.</span>
+  </br-message>
+</div>

package/www/assets/stencil-generated-docs/message/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/message?tab=designer).

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

@@ -0,0 +1,13 @@
+## Propriedades
+
+| Propriedade               | Atributo        | Descrição                                                                                                                                                                                                                                                                                                                                                                                     | Tipo                                           | Valor padrão                    |
+| ------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------- |
+| `autoRemove`              | `auto-remove`   | Controla o comportamento do fechamento do componente quando `isClosable` é verdadeiro. - Se definido como `true`, o componente será automaticamente removido do DOM ao clicar no botão de fechar. - Se definido como `false`, o componente permanecerá no DOM e apenas emitirá o evento `brDidClose`.  Esta propriedade não tem efeito se `isClosable` for `false`. O valor padrão é `false`. | `boolean`                                      | `false`                         |
+| `customId`                | `custom-id`     | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.                                                                                                                                                                                                                                                                                                        | `string`                                       | ```br-message-${messageId++}``` |
+| `isClosable`              | `is-closable`   | Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem. O fechamento emitirá o evento `brDidClose`, mas não removerá automaticamente o componente do DOM, a menos que a propriedade `autoRemove` também esteja definida como `true`. Este recurso não está disponível para mensagens do tipo feedback.                                     | `boolean`                                      | `false`                         |
+| `isFeedback`              | `is-feedback`   | Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário. Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.                                                                                                                                                  | `boolean`                                      | `false`                         |
+| `isInline`                | `is-inline`     | Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal. Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.                                                                                                                                                                                   | `boolean`                                      | `false`                         |
+| `message` *(obrigatório)* | `message`       | Define o texto da mensagem que será exibido. Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.                                                                                                                                                                                                                 | `string`                                       | ---                             |
+| `messageTitle`            | `message-title` | Define o título da mensagem, que é exibido no início, acima da mensagem principal. Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.                                                                                                                                                                                                       | `string`                                       | ---                             |
+| `showIcon`                | `show-icon`     | Se definido como verdadeiro, um ícone associado à mensagem será exibido. Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.                                                                                                                                                                                                                                | `boolean`                                      | `false`                         |
+| `state`                   | `state`         | Define o estado do message. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.                                                                                                                                                                      | `"danger" \| "info" \| "success" \| "warning"` | `'info'`                        |

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

@@ -0,0 +1,116 @@
+## 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   |
+| --------------- | ------------------- | ------------------------------------------------------------------------------------ | --------- | -------- |
+| `closable`      | `isClosable`        | Habilita o botão de fechar a mensagem. Opcional                                      | `boolean` | `false`  |
+| `feedback`      | `isFeedback`        | Mensagem contextual de feedback. Opcional                                            | `boolean` | `false`  |
+| `inline`        | `isInline`          | Exibir o título na mesma linha que a mensagem. Opcional                              | `boolean` | `false`  |
+| `showIcon`      | `showIcon`          | Exibir ícone na mensagem. Opcional                                                   | `boolean` | `false`  |
+| `text`          | `message`           | Texto da mensagem. **Obrigatório**                                                   | `string`  | `''`     |
+| `title`         | `messageTitle`      | Título da mensagem. Opcional                                                         | `string`  | `''`     |
+| `type`          | `state`             | Estado da mensagem. **Obrigatório**. Valores: 'info', 'warning', 'danger', 'success' | `string`  | `'info'` |
+
+### Eventos
+
+Entenda melhor como utilizar os eventos para o componente `<br-message></br-message>` no Vue e em StencilJS:
+
+#### Vue
+
+- Evento `close`: Evento emitido quando a mensagem é fechada.
+
+Exemplo:
+
+```html
+<br-message id="message-exemplo" text="Mensagem de exemplo"></br-message>
+```
+
+Adicionando o listener de evento:
+
+```javascript
+document.getElementById('message-exemplo').addEventListener('close', (e) => {
+  console.log('Mensagem fechada')
+})
+```
+
+#### StencilJS
+
+- Usando eventos em JSX: Automaticamente inclui o prefixo "on". Por exemplo, se o evento emitido for chamado `brDidClose`, a propriedade será chamada `onBrDidClose`.
+
+```html
+<!-- StencilJS -->
+<br-message onBrDidClose="handleMessageClose"></br-message>
+```
+
+- Ouvindo eventos de um elemento não JSX:
+
+```html
+<template>
+  <br-message></br-message>
+</template>
+
+<script>
+  const messageElement = document.querySelector('br-message')
+  messageElement.addEventListener('onBrDidClose', (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). |
+| `brDidClose`              | Evento emitido quando o usuário fecha a mensagem, se closable for true.                                   |
+| `brDisconnectedCallback`  | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). |
+
+## Métodos
+
+Não se aplica.
+
+### 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 Message em uma aplicação Web.
+
+```html
+<template>
+  <br-message
+    id="message-01"
+    state="success"
+    message-title="Título da Mensagem"
+    message="Texto da mensagem de exemplo"
+    is-inline
+    is-closable
+    show-icon
+    onBrDidClose="handleMessageClose"
+  ></br-message>
+</template>
+<script>
+  export default {
+    methods: {
+      handleMessageClose(event) {
+        console.log('Mensagem fechada: ', 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/message/slots.md

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                                       |
+| ----------- | ------------------------------------------------------------------------------- |
+| `"default"` | Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem. |

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

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

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

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

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

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

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

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

package/www/assets/stencil-generated-docs/radio/examples/radio-group.html

@@ -0,0 +1,8 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <p class="label mb-0">Rótulo</p>
+  <p class="help-text">Informações adicionais</p>
+  <br-radio class="mb-1" name="radio-group" value="option1">Option 1</br-radio>
+  <br-radio class="mb-1" name="radio-group" value="option2">Option 2</br-radio>
+  <br-radio class="mb-1" name="radio-group" value="option3">Option 3</br-radio>
+  <br-radio class="mb-1" name="radio-group" value="option4">Option 4</br-radio>
+</div>

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

@@ -0,0 +1,4 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-radio class="mb-1" id="radio-state-checked" name="radio-state-checked">Label Slotted</br-radio>
+  <br-radio class="mb-1" id="radio-state-checked" name="radio-state-checked" label="Prop Label"></br-radio>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-radio class="mb-1" id="radio-state-checked" name="radio-state-checked" checked label="Checked"></br-radio>
+  <br-radio class="mb-1" id="radio-state-checked" name="radio-state-checked" disabled label="Disabled"></br-radio>
+  <br-radio class="mb-1" id="radio-state-invalid" name="radio-state-invalid" state="invalid" label="Invalid"></br-radio>
+  <br-radio id="radio-state-valid" name="radio-state-valid" state="valid" label="Valid"></br-radio>
+</div>

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

@@ -0,0 +1,9 @@
+## Métodos
+
+### `toggleChecked() => Promise<void>`
+
+Inverte o valor da prop `checked`
+
+#### Retorna
+
+Tipo: `Promise<void>`

package/www/assets/stencil-generated-docs/radio/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/radio?tab=designer).

package/www/assets/stencil-generated-docs/radio/parts.md

@@ -0,0 +1,6 @@
+## Shadow Parts
+
+| Part            | Description |
+| --------------- | ----------- |
+| `"radio-input"` |             |
+| `"radio-label"` |             |

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

@@ -0,0 +1,12 @@
+## Propriedades
+
+| Propriedade            | Atributo           | Descrição                                                                                                                                                                                                                                                                                                                         | Tipo                   | Valor padrão                |
+| ---------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------- |
+| `checked`              | `checked`          | Define o estado de seleção do radio. Se definido como verdadeiro, o radio 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-radio-${radioId++}``` |
+| `disabled`             | `disabled`         | Desativa o radio, tornando-o não interativo.                                                                                                                                                                                                                                                                                      | `boolean`              | `false`                     |
+| `hasHiddenLabel`       | `has-hidden-label` | Define se o label associado ao radio deve ser oculto. Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.                                                                                                                                                                    | `boolean`              | `false`                     |
+| `label`                | `label`            | Texto descritivo exibido à direita do radio. 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 radio, que é utilizado para agrupar radios 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 radio. Valores possíveis: - 'valid': O radio é considerado válido. - 'invalid': O radio é 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 radio quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o radio está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`. | `string`               | ---                         |

package/www/assets/stencil-generated-docs/radio/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/select/dependencies.md

@@ -0,0 +1,36 @@
+## Dependências
+
+### Depende de
+
+- [br-input](../input)
+- [br-icon](../icon)
+- [br-checkbox](../checkbox)
+- [br-radio](../radio)
+- [br-list](../list)
+
+### Gráfico
+```mermaid
+graph TD;
+  br-select --Depende---> br-input
+  click br-input "src/components/input" "Link para a documentação do componente input"
+  class br-input depComponent
+  br-select --Depende---> br-icon
+  click br-icon "src/components/icon" "Link para a documentação do componente icon"
+  class br-icon depComponent
+  br-select --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-radio
+  click br-radio "src/components/radio" "Link para a documentação do componente radio"
+  class br-radio depComponent
+  br-select --Depende---> br-list
+  click br-list "src/components/list" "Link para a documentação do componente list"
+  class br-list depComponent
+  br-input --Depende---> br-icon
+  click br-icon "src/components/icon" "Link para a documentação do componente icon"
+  class br-icon depComponent
+  br-input --Depende---> br-button
+  click br-button "src/components/button" "Link para a documentação do componente button"
+  class br-button depComponent
+  class br-select mainComponent
+```

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

@@ -0,0 +1,5 @@
+## Eventos
+
+| Evento              | Descrição                                                            | Tipo               |
+| ------------------- | -------------------------------------------------------------------- | ------------------ |
+| `brDidSelectChange` | Evento emitido sempre que houver atualização nos itens selecionados. | `CustomEvent<any>` |

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

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-select')
+
+  const eventsToListen = ['click']
+
+  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/select/examples/multiple.html

@@ -0,0 +1,15 @@
+<div class="d-flex justify-content-evenly mt-5 p-4">
+  <br-select
+    label="Label"
+    select-all-label="Marcar Todos"
+    unselect-all-label="Desmarcar todos"
+    show-search-icon
+    is-multiple
+    placeholder="Selecione uma opção"
+    options='[
+    { "label": "Opção 1", "value": "1", "selected": false },
+    { "label": "Opção 2", "value": "2", "selected": false },
+    { "label": "Opção 3", "value": "3", "selected": false }
+  ]'
+  ></br-select>
+</div>

package/www/assets/stencil-generated-docs/select/examples/simple.html

@@ -0,0 +1,12 @@
+<div class="d-flex justify-content-evenly mt-5 p-4">
+  <br-select
+    show-search-icon
+    label="Label"
+    placeholder="Selecione uma opção"
+    options='[
+    { "label": "Opção 1", "value": "1", "selected": false },
+    { "label": "Opção 2", "value": "2", "selected": false },
+    { "label": "Opção 3", "value": "3", "selected": false }
+  ]'
+  ></br-select>
+</div>

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

@@ -0,0 +1,9 @@
+## Métodos
+
+### `toggleOpen() => Promise<void>`
+
+Inverte o valor da prop `isOpen`
+
+#### Retorna
+
+Tipo: `Promise<void>`

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

@@ -0,0 +1,13 @@
+## Propriedades
+
+| Propriedade        | Atributo             | Descrição                                                                              | Tipo      | Valor padrão                  |
+| ------------------ | -------------------- | -------------------------------------------------------------------------------------- | --------- | ----------------------------- |
+| `customId`         | `custom-id`          | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. | `string`  | ```br-select-${selectId++}``` |
+| `isMultiple`       | `is-multiple`        | Habilita o modo múltiplo para selecionar várias opções.                                | `boolean` | `false`                       |
+| `isOpen`           | `is-open`            | Indica se a listagem de itens do select está expandida                                 | `boolean` | `false`                       |
+| `label`            | `label`              | Rótulo que indica o tipo de informação que deve ser selecionada.                       | `string`  | ---                           |
+| `options`          | `options`            | JSON contendo as opções do select.                                                     | `string`  | `'[]'`                        |
+| `placeholder`      | `placeholder`        | Texto auxiliar exibido antes de uma seleção.                                           | `string`  | `''`                          |
+| `selectAllLabel`   | `select-all-label`   | Rótulo para selecionar todas as opções.                                                | `string`  | `'Selecionar todos'`          |
+| `showSearchIcon`   | `show-search-icon`   | Exibe o ícone de busca no campo de entrada.                                            | `boolean` | `false`                       |
+| `unselectAllLabel` | `unselect-all-label` | Rótulo para desmarcar todas as opções.                                                 | `string`  | `'Desselecionar todos'`       |

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

@@ -0,0 +1,63 @@
+## 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                                                               |
+| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------- |
+| --                 | `id`                | Especifica o ID do componente. Se não for fornecido, o ID será gerado automaticamente e de forma aleatória | `string`  | `undefined`                                                          |
+| --                 | `isOpen`            | Indica se a listagem de itens do select está expandida.                                                    | `boolean` | `false`                                                              |
+| `label`            | `label`             | Rótulo que indica o tipo de informação que deve ser selecionada.                                           | `string`  | `undefined`                                                          |
+| `multiple`         | `isMultiple`        | Habilita o modo múltiplo para selecionar várias opções.                                                    | `boolean` | `false`                                                              |
+| `options`          | `options`           | JSON contendo as opções disponíveis no select.                                                             | `object`  | `[{ "label": <string>, "value": <string>,  "selected": <boolean> }]` |
+| `placeholder`      | `placeholder`       | Texto auxiliar exibido antes de uma seleção.                                                               | `string`  | `Selecione uma opção`                                                |
+| `selectAllLabel`   | `selectAllLabel`    | Rótulo para selecionar todas as opções.                                                                    | `string`  | `"Selecionar todos"`                                                 |
+| `showSearchIcon`   | `showSearchIcon`    | Exibe o ícone de busca no campo de entrada.                                                                | `boolean` | `false`                                                              |
+| `unselectAllLabel` | `unselectAllLabel`  | Rótulo para desmarcar todas as opções.                                                                     | `string`  | `"Desselecionar todos"`                                              |
+
+## Como Utilizar Eventos
+
+Entenda melhor como utilizar os eventos para o componente `<br-select></br-select>` no Vue e em Stencil:
+
+### Vue
+
+| Evento   | Descrição                                   |
+| -------- | ------------------------------------------- |
+| `change` | Emitido ao alterar ou selecionar uma opção. |
+
+### StencilJS
+
+| Evento              | Descrição                                   |
+| ------------------- | ------------------------------------------- |
+| `brDidSelectChange` | Emitido ao alterar ou selecionar uma opção. |
+
+- *Usando eventos em JSX*: Automaticamente inclui o prefixo "on". Por exemplo, se o evento emitido for chamado `brDidSelectChange`, a propriedade será chamada `onbrDidSelectChange`.
+
+```html
+<!-- StencilJS -->
+<br-select onEventoPersonalizado="handleEvent"></br-select>
+```
+
+- *Ouvindo eventos de um elemento não JSX*: Ver exemplo abaixo:
+
+```html
+<template>
+  <br-select></br-select>
+</template>
+
+<script>
+  const selectElement = document.querySelector('br-select')
+  selectElement.addEventListener('brDidSelectChange', (event) => {
+    /* your listener */
+  })
+</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.
+
+## 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/switch/events.md

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

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

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-switch id="switch-small" density="small" checked>Densidade Alta</br-switch>
+  <br-switch id="switch-medium" checked>Densidade Média (Padrão)</br-switch>
+  <br-switch id="switch-large" checked density="large">Densidade Baixa</br-switch>
+</div>

package/www/assets/stencil-generated-docs/switch/examples/has-icon.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-switch id="switch-icon" has-icon checked>Label</br-switch>
+</div>

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

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-switch')
+  const eventsToListen = ['click', 'brDidSwitchToggle']
+  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/switch/examples/label.html

@@ -0,0 +1,11 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="col-md mt-5"><br-switch id="switch-default" label="Prop Label" checked></br-switch></div>
+  <div class="col-md mt-5"><br-switch id="switch-left" checked>Label na esquerda</br-switch></div>
+  <div class="col-md mt-5">
+    <br-switch id="switch-right" checked label-position="right">Label na direita</br-switch>
+  </div>
+  <div class="col-md mt-5"><br-switch id="switch-top" checked label-position="top">Label no topo</br-switch></div>
+  <div class="col-md mt-5">
+    <br-switch id="switch-label-01" checked label-on="Ligado" label-off="Desligado">Label</br-switch>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-switch id="switch-disabled" checked disabled>Disabled</br-switch>
+</div>

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

@@ -0,0 +1,9 @@
+## Métodos
+
+### `toggleChecked() => Promise<void>`
+
+Inverte o valor da prop `checked`
+
+#### Retorna
+
+Tipo: `Promise<void>`

package/www/assets/stencil-generated-docs/switch/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/switch?tab=designer).

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

@@ -0,0 +1,15 @@
+## 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-switch-${switchId++}``` |
+| `density`       | `density`        | O ajuste da densidade consiste em aumentar ou reduzir a área de interação do switch. Quanto menor for a densidade, maior a área de interação.                                                                                                                                                                                        | `"large" \| "medium" \| "small"` | `'medium'`                    |
+| `disabled`      | `disabled`       | Desativa o switch, tornando-o não interativo.                                                                                                                                                                                                                                                                                        | `boolean`                        | `false`                       |
+| `hasIcon`       | `has-icon`       | Adiciona um ícone ao switch para indicar a mudança de estado.                                                                                                                                                                                                                                                                        | `boolean`                        | `false`                       |
+| `label`         | `label`          | Texto descritivo. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.                                                                                                                                                                                                           | `string`                         | ---                           |
+| `labelOff`      | `label-off`      | Texto exibido quando o switch está desativado.                                                                                                                                                                                                                                                                                       | `string`                         | ---                           |
+| `labelOn`       | `label-on`       | Texto exibido quando o switch está ativado.                                                                                                                                                                                                                                                                                          | `string`                         | ---                           |
+| `labelPosition` | `label-position` | Posição do rótulo em relação ao switch.                                                                                                                                                                                                                                                                                              | `"left" \| "right" \| "top"`     | `'left'`                      |
+| `name`          | `name`           | Define o nome do switch, que é utilizado para agrupar switches em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.                                                                                                                                | `string`                         | ---                           |
+| `value`         | `value`          | Define o valor associado ao switch quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o switch está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o switch está selecionado; para verificar o estado de seleção, use a propriedade `checked`. | `string`                         | ---                           |