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

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

@@ -0,0 +1,9 @@
+## 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-checkgroup-${checkgroupId++}``` |
+| `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. | `boolean` | `false`                               |
+| `label`               | `label`                | Texto descritivo do grupo.                                                                                                                                                                                                                                                       | `string`  | ---                                   |
+| `labelDesselecionado` | `label-desselecionado` | Define o texto do label quando o checkbox está desmarcado.                                                                                                                                                                                                                       | `string`  | `'Selecionar tudo'`                   |
+| `labelSelecionado`    | `label-selecionado`    | Define o texto do label quando o checkbox está marcado.                                                                                                                                                                                                                          | `string`  | `'Desselecionar tudo'`                |

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

@@ -0,0 +1,83 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+### 1. Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados na versão 2.x. Verifique as mudanças abaixo para garantir uma migração suave.
+
+#### Propriedades removidas na versão 2.x
+
+| Propriedade         | Descrição                                                                                                                                  | Tipo     | Padrão |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ |
+| `checkgroup-child`  | Declara o comportamento checkgroup e coloca o checkbox como sendo pai. O filho possui o mesmo valor para a propriedade 'checkgroup-child'  | `string` | `null` |
+| `checkgroup-parent` | Declara o comportamento checkgroup e coloca o checkbox como sendo filho. O pai possui o mesmo valor para a propriedade 'checkgroup-parent' | `string` | `null` |
+
+#### Propriedades incluídas na versão 2.x
+
+| Propriedade           | Descrição                                                                                             | Tipo      | Padrão              |
+| --------------------- | ----------------------------------------------------------------------------------------------------- | --------- | ------------------- |
+| `checked`             | Define o estado de seleção do checkbox.                                                               | `boolean` | `false`             |
+| `indeterminate`       | Indica se o grupo de checkboxes está em estado indeterminado (alguns, mas não todos, estão marcados). | `boolean` | `false`             |
+| `label`               | Define o rótulo do grupo de caixas de seleção.                                                        | `string`  | `'false'`           |
+| `labelDesselecionado` | Define o texto do rótulo quando o checkbox está desmarcado.                                           | `string`  | `'Selecionar tudo'` |
+| `labelSelecionado`    | Define o texto do rótulo quando o checkbox está marcado.                                              | `string`  | `'Desmarcar tudo'`  |
+
+### 2. Eventos
+
+O componente `<br-checkgroup></br-checkgroup>` emite o evento `brDidAllCheckboxesSelected`. Esse evento segue o formato padrão do navegador e é disparado após o valor do `checked` ser alterado, retornando um feedback para o componente.
+
+### 3. Slots
+
+Na versão 2.x (StencilJS), foi criado um **slot padrão** que permite a personalização do conteúdo interno do `checkgroup`. O exemplo abaixo demonstra como usá-lo.
+
+```html
+<br-checkgroup label="Lista de opções" label-selecionado="Selecionar tudo" label-desselecionado="Desmarcar tudo">
+  <br-checkbox id="ckb-2" name="h-checkbox-2" label="Opção 2"></br-checkbox>
+</br-checkgroup>
+```
+
+### 4. Exemplos de Uso do Componente
+
+#### 4.1. Vue - 1.x (antes da migração para Stencil)
+
+```html
+<!-- Vue 1.x -->
+<div class="mb-1">
+  <br-checkbox label="Parent - Grupo 1" checkgroup-parent="grupo-1"></br-checkbox>
+</div>
+<div class="mb-1 ml-2">
+  <br-checkbox label="Child - Grupo 1" checkgroup-child="grupo-1"></br-checkbox>
+</div>
+<div class="mb-1 ml-2">
+  <br-checkbox label="Child - Grupo 1" checkgroup-child="grupo-1"></br-checkbox>
+</div>
+<div class="mb-1 ml-2">
+  <br-checkbox
+    label="Child - Grupo 1 / Parent - Grupo 2"
+    checkgroup-child="grupo-1"
+    checkgroup-parent="grupo-2"
+  ></br-checkbox>
+</div>
+<div class="mb-1 ml-4">
+  <br-checkbox label="Child - Grupo 2" checkgroup-child="grupo-2"></br-checkbox>
+</div>
+<div class="mb-1 ml-4">
+  <br-checkbox label="Child - Grupo 2" checkgroup-child="grupo-2"></br-checkbox>
+</div>
+<div class="mb-1 ml-4">
+  <br-checkbox label="Child - Grupo 2" checkgroup-child="grupo-2"></br-checkbox>
+</div>
+```
+
+#### 4.2. Vue - 2.x (após a migração para Stencil)
+
+```html
+<!-- StencilJS -->
+<br-checkgroup label="Lista de opções" label-selecionado="Selecionar tudo" label-desselecionado="Desmarcar 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>
+```
+
+### 5. Considerações Finais
+
+Se você encontrar problemas durante o processo de migração ou tiver dúvidas sobre qualquer etapa, entre em contato com a equipe do [Padrão Digital de Governo](https://discord.gg/NkaVZERAT7) para obter assistência.

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

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                                |
+| ----------- | ------------------------------------------------------------------------ |
+| `"default"` | Slot para adicionar os checkboxes que serão controlados pelo checkgroup. |

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

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

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

@@ -0,0 +1,6 @@
+## Eventos
+
+| Evento       | Descrição                  | Tipo                           |
+| ------------ | -------------------------- | ------------------------------ |
+| `brDidClose` | Evento emitido ao recolher | `CustomEvent<{ id: string; }>` |
+| `brDidOpen`  | Evento emitido ao expandir | `CustomEvent<{ id: string; }>` |

package/www/assets/stencil-generated-docs/collapse/examples/accordion-behavior.html

@@ -0,0 +1,27 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="br-list">
+    <br-collapse accordion-group="group-01">
+      <span slot="trigger">Rótulo 01</span>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+      </br-item>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+      </br-item>
+    </br-collapse>
+
+    <br-collapse accordion-group="group-01">
+      <span slot="trigger">Rótulo 02</span>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+      </br-item>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+      </br-item>
+    </br-collapse>
+  </div>
+</div>

package/www/assets/stencil-generated-docs/collapse/examples/collapse-with-different-icons.html

@@ -0,0 +1,9 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-collapse icon-to-hide="fa6-solid:minus" icon-to-show="fa6-solid:plus">
+    <span slot="trigger">TÍTULO COLLAPSE</span>
+    <br-item density="medium">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Densidade padrão
+    </br-item>
+  </br-collapse>
+</div>

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

@@ -0,0 +1,31 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-list>
+    <br-collapse icon-position="left">
+      <span slot="trigger">Rótulo 01</span>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+        <span slot="end">META</span>
+      </br-item>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+        <span slot="end">META</span>
+      </br-item>
+    </br-collapse>
+
+    <br-collapse icon-position="left">
+      <span slot="trigger">Rótulo 02</span>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+        <span slot="end">META</span>
+      </br-item>
+      <br-item>
+        <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+        Sub-item
+        <span slot="end">META</span>
+      </br-item>
+    </br-collapse>
+  </br-list>
+</div>

package/www/assets/stencil-generated-docs/collapse/examples/different-icons.html

@@ -0,0 +1,9 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-collapse icon-to-hide="fa6-solid:minus" icon-to-show="fa6-solid:plus">
+    <span slot="trigger">TÍTULO COLLAPSE</span>
+    <br-item density="medium">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Densidade padrão
+    </br-item>
+  </br-collapse>
+</div>

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

@@ -0,0 +1,15 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-collapse icon-position="left">
+    <div slot="trigger" class="row">
+      <div class="col-3">
+        <br-checkbox id="check-line-1" aria-label="Selecionar linha 1"></br-checkbox>
+      </div>
+      <div class="col-2">Linha 1 coluna 1</div>
+      <div class="col-2">Linha 1 coluna 2</div>
+      <div class="col-2">Linha 1 coluna 3</div>
+    </div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet lacinia. Vestibulum in interdum
+    eros. Donec vel tempus diam. Aenean pulvinar mattis nisi in laoreet. Integer felis mi, vehicula sed pretium sit
+    amet, pellentesque vel nisl. Curabitur metus ante, pellentesque in lectus a, sagittis imperdiet mi.
+  </br-collapse>
+</div>

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

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-collapse')
+
+  const eventsToListen = ['brDidOpen, brDidClose']
+
+  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/collapse/methods.md

@@ -0,0 +1,19 @@
+## Métodos
+
+### `closeCollapse() => Promise<void>`
+
+Método público para fechar
+
+#### Retorna
+
+Tipo: `Promise<void>`
+
+
+
+### `openCollapse() => Promise<void>`
+
+Método público para abrir
+
+#### Retorna
+
+Tipo: `Promise<void>`

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

@@ -0,0 +1,6 @@
+## Visão Geral
+
+O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.
+
+- Collapse simples: Cada instância funciona de forma independente, permitindo abrir ou fechar o conteúdo conforme necessário, sem impactar outros componentes na página.
+- Accordion: Quando configurado com a propriedade `accordionGroup`, múltiplos componentes `br-collapse` são agrupados. Nesse caso, apenas um item pode estar expandido por vez. Ao abrir um novo item, o anteriormente expandido será automaticamente fechado.

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

@@ -0,0 +1,10 @@
+## Propriedades
+
+| Propriedade      | Atributo          | Descrição                                                                              | Tipo                | Valor padrão                      |
+| ---------------- | ----------------- | -------------------------------------------------------------------------------------- | ------------------- | --------------------------------- |
+| `accordionGroup` | `accordion-group` | Define se o collapse faz parte de um accordion                                         | `string`            | ---                               |
+| `customId`       | `custom-id`       | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. | `string`            | ```br-collapse-${collapseId++}``` |
+| `iconPosition`   | `icon-position`   | Define a posição do ícone: 'left' ou 'right'                                           | `"left" \| "right"` | `'right'`                         |
+| `iconToHide`     | `icon-to-hide`    | Classe CSS para o ícone de recolhimento                                                | `string`            | `'fa6-solid:chevron-up'`          |
+| `iconToShow`     | `icon-to-show`    | Classe CSS para o ícone de expansão                                                    | `string`            | `'fa6-solid:chevron-down'`        |
+| `open`           | `open`            | Define se o item está inicialmente aberto                                              | `boolean`           | `false`                           |

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

@@ -0,0 +1,91 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+## Nomes de Propriedades
+
+| **Propriedade Vue**            | **Propriedade Stencil**         | **Descrição**                                                                 | **Tipo**      | **Padrão**         |
+|--------------------------------|----------------------------|------------------------------------------------------------------------------------|---------------|-------------------------|
+| —                             | `iconPosition`              | Determina a posição do ícone (‘left’ ou ‘right’)                         | `string`      | `"right"`              |
+| `collapsed`                    | `open`                     | Indica se o componente está expandido.          | `boolean`     | `false`                 |
+| `id`  | `customId`                | Identificador exclusivo, gerado automaticamente.            | `string`      | `"br-collapse-{id}"`    |
+| `nameIconCollapsed`            | `iconToHide`               | Classe CSS do ícone para estado recolhido                                       | `string`      | `"fa6-solid:chevron-up"` |
+| `nameIconNotCollapsed`         | `iconToShow`               | Classe CSS do ícone para estado expandido                                       | `string`      | `"fa6-solid:chevron-down"` |
+| `showIcon`                     | —                        | Determina se o ícone deve ser exibido. Na nova versão, o ícone sempre será exibido.                                            | `boolean`     | `false`                 |
+| `title`                        | —                        | Título do collapse (não mais usado; utilize slots para customização)               | `string`      | `""`                   |
+
+---
+
+## Uso de Slots
+
+### Versão Antiga
+
+- **`default`**: Conteúdo interno do collapse (obrigatório).
+
+**Exemplo:**
+
+```html
+<br-collapse title="Meu Collapse">
+  <p>Conteúdo interno</p>
+</br-collapse>
+```
+
+### Versão Nova
+
+- **`trigger`**: Customiza o conteúdo do acionador do collapse.
+- **`default`**: Conteúdo interno mostrado/ocultado dinamicamente.
+
+**Exemplo:**
+
+```html
+<br-collapse>
+  <div slot="trigger">Meu Título Personalizado</div>
+  <p>Conteúdo interno</p>
+</br-collapse>
+```
+
+---
+
+## Uso de Eventos
+
+| **Versão Antiga** | **Versão Nova**        | **Descrição**                                             |
+|----------------------|-------------------------|---------------------------------------------------------|
+| `toggle-collapse`    | `brDidOpen`/`brDidClose`| Emitido ao expandir (`brDidOpen`) ou recolher (`brDidClose`) |
+
+**Exemplo com Eventos na Versão Nova:**
+
+```javascript
+const collapse = document.querySelector('br-collapse');
+collapse.addEventListener('brDidOpen', (event) => {
+  console.log('Collapse aberto:', event.detail.id);
+});
+collapse.addEventListener('brDidClose', (event) => {
+  console.log('Collapse fechado:', event.detail.id);
+});
+```
+
+---
+
+## Considerações de Design
+
+- **Personalização do ícone:** Agora é possível controlar a posição do ícone (‘left’ ou ‘right’) através da propriedade `iconPosition`.
+- **Flexibilidade:** Títulos e ícones são definidos usando slots, proporcionando maior controle sobre o layout.
+
+---
+
+## Exemplo Comparativo
+
+### Versão 1.0
+
+```html
+<br-collapse title="Meu Collapse" show-icon name-icon-collapsed="chevron-up" name-icon-not-collapsed="chevron-down">
+  <p>Conteúdo interno</p>
+</br-collapse>
+```
+
+### Versão 2.0
+
+```html
+<br-collapse icon-to-show="fa6-solid:plus" icon-to-hide="fa6-solid:minus" icon-position="left">
+  <div slot="trigger">Meu Título</div>
+  <p>Conteúdo interno</p>
+</br-collapse>
+```

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

@@ -0,0 +1,6 @@
+## Slots
+
+| Slot        | Descrição                                                            |
+| ----------- | -------------------------------------------------------------------- |
+| `"default"` | O conteúdo expansível mostrado/ocultado dinamicamente.               |
+| `"trigger"` | Permite personalizar o conteúdo do acionador (texto, imagens, etc.). |

package/www/assets/stencil-generated-docs/divider/examples/bleed.html

@@ -0,0 +1,9 @@
+<div class="panel">
+  <div class="container mt-3" id="container1">
+    <p>
+      Exemplo de um Divider que se estende por toda a largura do container pai ou da tela, ultrapassando os espaçamentos
+      (padding):
+    </p>
+    <br-divider bleed></br-divider>
+  </div>
+</div>

package/www/assets/stencil-generated-docs/divider/examples/border-style.html

@@ -0,0 +1,16 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="row">
+    <div class="col">
+      <p>O divider com estilo de borda sólida (solid) cria uma linha contínua e consistente.</p>
+      <br-divider border-style="solid" class="my-3"></br-divider>
+      <p>Este estilo é a opção padrão e mais utilizada.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <p>O divider com estilo de borda tracejada (dashed) traz um visual diferenciado.</p>
+      <br-divider border-style="dashed" class="my-3"></br-divider>
+      <p>Este estilo cria uma distinção visual em relação aos dividers padrão da interface.</p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="row p-3">
+    <div class="col">
+      <p>O componente divider permite criar separações visuais entre diferentes seções de conteúdo em uma página.</p>
+      <br-divider color="#ff0000" class="my-3"></br-divider>
+      <p>Este é um divider horizontal com cor vermelha, usando a espessura padrão (small).</p>
+    </div>
+
+    <div class="col">
+      <p>
+        O divider pode ser personalizado com diferentes cores para atender às necessidades visuais e de identidade do
+        projeto.
+      </p>
+      <br-divider color="#00ff00" class="my-3"></br-divider>
+      <p>Este divider verde demonstra como usar cores para melhor organização do conteúdo.</p>
+    </div>
+
+    <div class="col">
+      <p>
+        Divisores acessíveis devem incluir atributos aria-label que descrevam sua função e aparência para tecnologias
+        assistivas.
+      </p>
+      <br-divider color="#0000ff" class="my-3"></br-divider>
+      <p>
+        Este divider azul demonstra o uso correto de atributos de acessibilidade, facilitando o entendimento de sua
+        função.
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="row p-3">
+    <div class="col">
+      <p>O componente divider é uma linha neutra que separa conteúdos, sessões ou temas afins.</p>
+      <br-divider class="my-3"></br-divider>
+      <p>Este é um exemplo do divider padrão com estilo solid e espessura small.</p>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <div class="bg-secondary-07 text-secondary-01 p-3">
+        <p>
+          Em fundos escuros, o divider mantém sua funcionalidade de separação visual e seu contraste garante boa
+          visibilidade.
+        </p>
+        <br-divider class="my-3" is-dark-mode></br-divider>
+        <p>Este divider utiliza o modo escuro para adaptar-se ao fundo escuro.</p>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll("br-divider");
+
+  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/divider/examples/slot-content-alignment.html

@@ -0,0 +1,5 @@
+<div class="panel">
+  <br-divider align="center">Conteúdo centralizado</br-divider>
+  <br-divider align="right">Conteúdo alinhado à direita</br-divider>
+  <br-divider align="left">Conteúdo alinhado à esquerda</br-divider>
+</div>

package/www/assets/stencil-generated-docs/divider/examples/thickness.html

@@ -0,0 +1,29 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="row p-3">
+    <div class="col">
+      <p>
+        O divider com espessura pequena (small) é ideal para criar separações sutis entre conteúdos relacionados na
+        mesma seção.
+      </p>
+      <br-divider thickness="small" class="my-3"></br-divider>
+      <p>
+        Os dividers devem ser usados quando os elementos não puderem ser separados por distanciamento (espaços vazios).
+      </p>
+    </div>
+
+    <div class="col">
+      <p>O divider com espessura média (medium) proporciona uma separação mais visível entre seções.</p>
+      <br-divider thickness="medium" class="my-3"></br-divider>
+      <p>Esta opção equilibra visibilidade e sutileza.</p>
+    </div>
+
+    <div class="col">
+      <p>O divider com espessura grande (large) estabelece uma divisão forte entre seções distintas de conteúdo.</p>
+      <br-divider thickness="large" class="my-3"></br-divider>
+      <p>
+        Lembre que os dividers devem ser visíveis em um layout, porém não devem “destoar” chamando mais atenção que o
+        próprio conteúdo.
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="p-3 mb-2">
+    <p>O divider vertical é útil para criar separações entre elementos que estão dispostos lado a lado.</p>
+    <br-divider orientation="vertical" class="mx-3"></br-divider>
+    <p>
+      Esta orientação é eficaz em layouts onde o espaço horizontal precisa ser dividido em seções distintas sem quebrar
+      o fluxo de leitura.
+    </p>
+  </div>
+  <div class="bg-secondary-07 text-secondary-01 p-3">
+    <p>
+      Em fundos escuros, o divider vertical mantém sua função de separação espacial e o contraste deve garantir que seja
+      visível.
+    </p>
+    <br-divider orientation="vertical" is-dark-mode class="mx-3"></br-divider>
+    <p>
+      A combinação do modo escuro com a orientação vertical cria uma separação elegante que mantém a clareza
+      organizacional do conteúdo.
+    </p>
+  </div>
+</div>

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

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

@@ -0,0 +1,12 @@
+## Propriedades
+
+| Propriedade   | Atributo       | Descrição                                                       | Tipo                             | Valor padrão                    |
+| ------------- | -------------- | --------------------------------------------------------------- | -------------------------------- | ------------------------------- |
+| `align`       | `align`        | Alinhamento do texto do divider                                 | `"center" \| "left" \| "right"`  | ---                             |
+| `bleed`       | `bleed`        | Define se o divider deve ocupar toda a largura do container pai | `boolean`                        | `false`                         |
+| `borderStyle` | `border-style` | Modifica o estilo da linha                                      | `"dashed" \| "solid"`            | `'solid'`                       |
+| `color`       | `color`        | Define a cor da linha                                           | `string`                         | `''`                            |
+| `customId`    | `custom-id`    | Identificador único                                             | `string`                         | ```br-divider-${dividerId++}``` |
+| `isDarkMode`  | `is-dark-mode` | Ativa o modo escuro                                             | `boolean`                        | `false`                         |
+| `orientation` | `orientation`  | Define a orientação                                             | `"horizontal" \| "vertical"`     | `'horizontal'`                  |
+| `thickness`   | `thickness`    | Modifica a espessura da linha                                   | `"large" \| "medium" \| "small"` | `'small'`                       |

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

@@ -0,0 +1,34 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+### Nomes de Propriedades
+
+| **Propriedade Vue**  | **Propriedade Stencil** | **Descrição** | **Tipo** | **Padrão** |
+|----------------------|------------------------|---------------|----------|------------|
+| —                   | `align`                | Define o alinhamento do conteúdo do divider (`left`, `center`, `right`, `full`). | `string` | `"full"` |
+| —                   | `bleed`                | Permite que o divider ocupe toda a largura do container pai. | `boolean` | `false` |
+| —                   | `color`                | Define a cor da linha do divisor. | `string` | `""` |
+| —                   | `customId`             | Identificador exclusivo gerado automaticamente. | `string` | `"br-divider-{id}"` |
+| —                   | `isDarkMode`           | Ativa o modo escuro para o divider. | `boolean` | `false` |
+| `dashed`            | `styleBorder`          | Define se a linha é contínua (`solid`) ou tracejada (`dashed`). | `string` | `"solid"` |
+| `size`              | `lineWeight`           | Define a espessura da linha (`small`, `medium`, `large`). | `string` | `"small"` |
+| `vertical`          | `orientation`          | Define a orientação do divisor (`horizontal` ou `vertical`). | `string` | `"horizontal"` |
+
+---
+
+## Uso de Slots
+
+### Versão Antiga (Vue)
+
+- Sem uso de slots
+- Componente puramente estrutural, renderizando apenas uma linha horizontal ou vertical com base nas props fornecidas (vertical, size, dashed).
+
+### Versão Nova (Stencil)
+
+- Possui um slot default que permite inserir textos, ícones ou outros elementos.
+- Se o slot estiver vazio, o componente renderiza um `<hr>` simples.
+
+```html
+<br-divider>
+  <span>Texto no divisor</span>
+</br-divider>
+```

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

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                                                                        |
+| ----------- | ---------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Conteúdo opcional que pode ser exibido dentro do divisor, como texto, ícones ou outros elementos personalizados. |

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

@@ -0,0 +1,5 @@
+## Eventos
+
+| Evento             | Descrição                                        | Tipo                                     |
+| ------------------ | ------------------------------------------------ | ---------------------------------------- |
+| `brDropdownChange` | Evento emitido quando o estado do dropdown muda. | `CustomEvent<{ 'is-opened': boolean; }>` |

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

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