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

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

@@ -0,0 +1,8 @@
+## Slots
+
+| Slot          | Descrição                                                                                                                                      |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"action"`    | Botão à direita do input.                                                                                                                      |
+| `"feedback"`  | Mensagem de feedback como resposta específica a uma interação do usuário com o input. Pode ser feedback de erro, aviso, sucesso ou informação. |
+| `"help-text"` | Personalização do texto de ajuda.                                                                                                              |
+| `"icon"`      | Ícone à esquerda do input.                                                                                                                     |

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

@@ -0,0 +1,6 @@
+## Eventos
+
+| Evento        | Descrição                                                                                                                                                                                     | Tipo                                  |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `brDidClick`  | Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`). Pode ser utilizado para ações personalizadas, exceto quando o item está desativado. | `CustomEvent<any>`                    |
+| `brDidSelect` | Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.          | `CustomEvent<{ selected: boolean; }>` |

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

@@ -0,0 +1,17 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-item>
+    <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+    Densidade baixa
+    <span slot="end">META</span>
+  </br-item>
+  <br-item density="medium">
+    <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+    Densidade padrão
+    <span slot="end">META</span>
+  </br-item>
+  <br-item density="small">
+    <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+    Densidade alta
+    <span slot="end">META</span>
+  </br-item>
+</div>

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

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

@@ -0,0 +1,21 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <div class="row">
+    <div class="col-md-5 mx-3 mb-4">
+      <br-item is-interactive>
+        <br-checkbox id="check-01" name="check-01" label="Rótulo do Checkbox 01"></br-checkbox>
+      </br-item>
+      <br-item is-interactive>
+        <br-checkbox id="check-02" name="check-02" label="Rótulo do Checkbox 02"></br-checkbox>
+      </br-item>
+    </div>
+
+    <div class="col-md-5 mx-3 mb-4">
+      <br-item is-interactive>
+        <br-radio id="radio-01" name="radio" label="Rótulo do Radio 01"></br-radio>
+      </br-item>
+      <br-item is-interactive>
+        <br-radio id="radio-02" name="radio" label="Rótulo do Radio 02"></br-radio>
+      </br-item>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-item class="exemplo" disabled>
+    <img class="rounded" src="https://picsum.photos/40/40" alt="imagem de exemplo 1" />
+    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
+  </br-item>
+</div>

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

@@ -0,0 +1,19 @@
+<div class="d-flex flex-column flex-wrap justify-content-evenly mt-5 p-4">
+  <br-item>
+    <img src="https://picsum.photos/40/40" alt="imagem de exemplo 1" />
+    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
+  </br-item>
+  <span class="br-divider"></span>
+  <br-item>
+    Lorem ipsum <a href="javascript:void(0);">dolor</a>, sit amet consectetur
+    <a href="javascript:void(0);">adipisicing</a> elit.
+    <br-button shape="circle" aria-label="Interagir com item">
+      <br-icon icon-name="fa6-solid:city"></br-icon>
+    </br-button>
+  </br-item>
+  <span class="br-divider"></span>
+  <br-item href="javascript: void(0)">Item link </br-item>
+  <span class="br-divider"></span>
+  <br-item is-button> Item botão </br-item>
+  <br-item id="myButton" is-button onclick="console.log(this)">Clique aqui</br-item>
+</div>

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

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

@@ -0,0 +1,15 @@
+## 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-item-${itemId++}``` |
+| `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 item, tornando-o não interativo.                                                                                                                                                                    | `boolean`                                    | `false`                   |
+| `href`          | `href`           | URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.                                                                                | `string`                                     | ---                       |
+| `isActive`      | `is-active`      | Indica se o item está no estado ativo. Se definido como verdadeiro, o item será exibido como ativo.                                                                                                            | `boolean`                                    | `false`                   |
+| `isButton`      | `is-button`      | Quando definido como `true`, o item será tratado como um botão.                                                                                                                                                | `boolean`                                    | `false`                   |
+| `isInteractive` | `is-interactive` | Marca o item como interativo, permitindo que toda a superfície do item seja clicável.                                                                                                                          | `boolean`                                    | `false`                   |
+| `isSelected`    | `is-selected`    | Indica se o item está no estado selecionado. Se definido como verdadeiro, o item será exibido como selecionado.                                                                                                | `boolean`                                    | `false`                   |
+| `target`        | `target`         | Define o alvo do link quando `href` está presente. Pode ser: - `_blank` para abrir em uma nova aba, - `_self` para abrir na mesma aba, - `_parent` para abrir na aba pai, - `_top` para abrir na aba superior. | `"_blank" \| "_parent" \| "_self" \| "_top"` | ---                       |
+| `type`          | `type`           | Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser: - `'submit'` para enviar um formulário, - `'reset'` para redefinir um formulário, - `'button'` para um botão padrão.                       | `"button" \| "reset" \| "submit"`            | ---                       |
+| `value`         | `value`          | Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.                                                                                                   | `string`                                     | ---                       |

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

@@ -0,0 +1,79 @@
+# Item - Guia de Migração de Web Components de Vue para StencilJS
+
+## Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados, conforme abaixo:
+
+| Propriedade Vue | Propriedade Stencil | Descrição                                                                | Tipo      | Padrão      |
+| --------------- | ------------------- | ------------------------------------------------------------------------ | --------- | ----------- |
+| ---             | `density`           | Define a densidade do item ('large', 'middle', 'small').                 | `string`  | `large`     |
+| ---             | `isButton`          | Define se o item deve ser renderizado como um botão.                     | `boolean` | `false`     |
+| ---             | `isInteractive`     | Indica se toda a superfície do item é interativa.                        | `boolean` | `false`     |
+| ---             | `target`            | Especifica onde abrir o link (usado com href).                           | `string`  | `undefined` |
+| ---             | `type`              | Tipo do botão, só utilizado se isButton for true.                        | `boolean` | `false`     |
+| `active`        | `isActive`          | Coloca o item como ênfase, destacando-o dos demais (estado ativo).       | `boolean` | `false`     |
+| `hover`         | ---                 | Efeito Hover, destaca o item ao passar o mouse por cima do mesmo.        | `boolean` | `false`     |
+| `open`          | ---                 | Indica se o item está aberto/fechado quando o br-list pai é data-toggle. | `boolean` | `false`     |
+| `selected`      | `isSelected`        | Indica se o item está ou não selecionado.                                | `boolean` | `false`     |
+| `title`         | ---                 | Título visível para o item quando o br-list pai é data-toggle.           | `string`  | `undefined` |
+
+## Como Utilizar Eventos
+
+Entenda melhor como utilizar os eventos para o componente `<br-item></br-item>` no Vue e em Stencil:
+
+### Vue
+
+| Evento            | Descrição                                             |
+| ----------------- | ----------------------------------------------------- |
+| `toggle-open`     | Disparado quando a prop open é modificada.            |
+| `toggle-selected` | Emitido quando quando a prop `selected` é modificada. |
+
+### StencilJS
+
+- *Usando eventos em JSX*: Automaticamente inclui o prefixo "on". Por exemplo, se o evento emitido for chamado `brDidClick`, a propriedade será chamada `onBrDidClick`.
+
+```html
+<!-- StencilJS -->
+<br-item onEventoPersonalizado="handleEvent"></br-item>
+```
+
+- *Ouvindo eventos de um elemento não JSX*: Ver exemplo abaixo:
+
+```html
+<template>
+  <br-item></br-item>
+</template>
+
+<script>
+  const itemElement = document.querySelector('br-item')
+  itemElement.addEventListener('brDidClick', (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.
+
+## Exemplos
+
+Exemplos de uso do componente Item no Stencil:
+
+```html
+<br-item is-button is-selected onBrDidClick="handleClick"> Botão Item </br-item>
+```
+
+```html
+<br-item href="https://example.com" target="_blank"> Link Item </br-item>
+```
+
+```html
+<br-item is-interactive>
+  <br-checkbox> Item Interativo </br-checkbox>
+</br-item>
+```
+
+## 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/item/slots.md

@@ -0,0 +1,7 @@
+## Slots
+
+| Slot        | Descrição                                                                                                                                                              |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.). |
+| `"end"`     | Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.                                                           |
+| `"start"`   | Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.                                                                                     |

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

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

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

@@ -0,0 +1,64 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-list role="list" header="Densidade alta (padrão)">
+    <br-item role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+  </br-list>
+
+  <br-list role="list" header="Densidade média">
+    <br-item density="middle" role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item density="middle" role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item density="middle" role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+  </br-list>
+
+  <br-list role="list" header="Densidade baixa">
+    <br-item density="small" role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item density="small" role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item density="small" role="listitem">
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+  </br-list>
+</div>

package/www/assets/stencil-generated-docs/list/examples/grouped.html

@@ -0,0 +1,50 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-list list-title="Por rótulo">
+    <br-item>RÓTULO 01</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-item>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Sub-item
+      <span slot="end">META</span>
+    </br-item>
+    <br-item>RÓTULO 02</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-item>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Sub-item
+      <span slot="end">META</span>
+    </br-item>
+  </br-list>
+
+  <br-list list-title="Por separador">
+    <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>
+    <span class="br-divider"></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-list>
+</div>

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

@@ -0,0 +1,21 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-list list-title="Título (opcional)" is-horizontal>
+    <br-item>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <span slot="end">META</span>
+    </br-item>
+  </br-list>
+</div>

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

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

package/www/assets/stencil-generated-docs/list/examples/selectable.html

@@ -0,0 +1,43 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-list list-title="Itens selecionáveis">
+    <br-item is-interactive>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <br-checkbox
+        slot="end"
+        class="mb-1"
+        id="check-01"
+        name="check-01"
+        label="Rótulo do Checkbox 01"
+        has-hidden-label
+      ></br-checkbox>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item is-interactive>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <br-checkbox
+        slot="end"
+        class="mb-1"
+        id="check-02"
+        name="check-02"
+        label="Rótulo do Checkbox 02"
+        has-hidden-label
+      ></br-checkbox>
+    </br-item>
+    <span class="br-divider"></span>
+    <br-item is-interactive>
+      <br-icon slot="start" icon-name="fa6-solid:heart-pulse"></br-icon>
+      Texto principal
+      <br-checkbox
+        slot="end"
+        class="mb-1"
+        id="check-03"
+        name="check-03"
+        label="Rótulo do Checkbox 03"
+        has-hidden-label
+      ></br-checkbox>
+    </br-item>
+    <span class="br-divider"></span>
+  </br-list>
+</div>

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

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

@@ -0,0 +1,8 @@
+## 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-list-${listId++}``` |
+| `header`            | `header`              | Define o cabeçalho para a lista.                                                       | `string`  | ---                       |
+| `hideHeaderDivider` | `hide-header-divider` | Indica que o divider para o título da lista estará oculto.                             | `boolean` | `false`                   |
+| `isHorizontal`      | `is-horizontal`       | Indica se a lista será horizontal. Por padrão, a lista é vertical.                     | `boolean` | `false`                   |

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

@@ -0,0 +1,23 @@
+# List - Guia de Migração de Web Components de Vue para StencilJS
+
+## Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados, conforme abaixo:
+
+| Propriedade Vue    | Propriedade Stencil | Descrição                                                                       | Tipo      | Padrão      |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------- | --------- | ----------- |
+| `dataToggle`       | ---                 | Ativa a lista expansiva, onde os `br-item` filhos abrem/fecham ao clicá-los.    | `boolean` | `false`     |
+| `dataUnique`       | ---                 | Ativa a abertura de um `br-item` da lista por vez quando a mesma é data-toggle. | `boolean` | `false`     |
+| `density`          | ---                 | Níveis de densidade agora são definidos no componente `br-item`.                | `string`  | `undefined` |
+| `hideTitleDivider` | `hideHeaderDivider` | Oculta o "divider" abaixo do header da lista (título e botões de ação).         | `boolean` | `false`     |
+| `horizontal`       | `isHorizontal`      | Indica se a lista será horizontal. Por padrão, a lista é vertical.              | `boolean` | `false`     |
+| `spaceBetween`     | ---                 | Indica que os itens da lista terão espaçamento uniforme entre eles.             | `boolean` | `false`     |
+| `title`            | `listTitle`         | Define o título para a lista.                                                   | `string`  | `undefined` |
+
+## 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/list/slots.md

@@ -0,0 +1,6 @@
+## Slots
+
+| Slot        | Descrição                                                                                          |
+| ----------- | -------------------------------------------------------------------------------------------------- |
+| `"default"` | Slot padrão para inclusão dos itens da lista.                                                      |
+| `"header"`  | Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo). |

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

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-loading label="Carregando..." is-medium></br-loading>
+</div>

package/www/assets/stencil-generated-docs/loading/examples/progress.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-loading is-progress progress-percent="100"></br-loading>
+</div>

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

package/www/assets/stencil-generated-docs/loading/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-loading-${loadingId++}``` |
+| `isMedium`        | `is-medium`        | Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.                                                                                                           | `boolean` | `false`                         |
+| `isProgress`      | `is-progress`      | Determina o tipo de indicador a ser exibido: - Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso. - Se falso, exibirá um indicador de carregamento indeterminado. | `boolean` | `false`                         |
+| `label`           | `label`            | Texto a ser exibido abaixo do indicador de carregamento. Pode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.                                  | `string`  | ---                             |
+| `progressPercent` | `progress-percent` | Define a porcentagem de progresso a ser exibida na barra de progresso. Deve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.                       | `number`  | ---                             |

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

@@ -0,0 +1,42 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+### br-loading - Guia de Migração de Web Components de Vue para StencilJS
+
+Este guia detalha as mudanças necessárias para migrar o componente `br-loading` de Vue para StencilJS, incluindo propriedades, eventos e estrutura.
+
+#### Propriedades
+
+| Propriedade Vue | Propriedade Stencil | Descrição                                          | Tipo      | Padrão  |
+| :-------------- | :------------------ | :------------------------------------------------- | :-------- | :------ |
+| -               | -                   | Atributos ARIA herdados do elemento host.          | `object`  | `{}`    |
+| -               | `label`             | Texto exibido abaixo do indicador de carregamento. | `string`  | `''`    |
+| -               | `medium`            | Define o tamanho médio para o componente.          | `boolean` | `false` |
+| -               | `percent`           | Porcentagem de progresso (se `progress` for true). | `number`  | `null`  |
+| -               | `progress`          | Indica se a barra de progresso está visível.       | `boolean` | `false` |
+
+#### Eventos
+
+| Evento                | Descrição                                                                                       |
+| :-------------------- | :---------------------------------------------------------------------------------------------- |
+| `brComponentDidLoad`  | Emitido após o componente ser carregado.                                                        |
+| `brComponentWillLoad` | Emitido antes do componente ser carregado. É aqui que os atributos ARIA herdados são coletados. |
+| `brConnectedCallback` | Emitido quando o componente é conectado ao DOM.                                                 |
+
+#### Estrutura
+
+- O componente renderiza um elemento `div` com a classe `br-loading` e atributos ARIA para acessibilidade.
+- Se `progress` for `true`, uma barra de progresso com duas máscaras é exibida.
+- Se `progress` for `false`, um indicador de carregamento indeterminado e um rótulo (`label`) são exibidos.
+- A classe `medium` pode ser adicionada para alterar o tamanho do componente.
+
+#### Exemplo de Uso
+
+```html
+<br-loading progress percent="50" label="Carregando..."></br-loading>
+```
+
+#### Considerações Finais
+
+- Para eventos do ciclo de vida do StencilJS (`brComponentWillLoad`, etc.), consulte a documentação oficial em [https://stenciljs.com/docs/component-lifecycle](https://stenciljs.com/docs/component-lifecycle).
+- Certifique-se de que os estilos do componente estejam corretamente definidos no arquivo `loading.scss`.
+- Para suporte ou dúvidas adicionais, consulte a equipe do Padrão Digital de Governo em [https://discord.gg/NkaVZERAT7](https://discord.gg/NkaVZERAT7).

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

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

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

@@ -0,0 +1,5 @@
+## Eventos
+
+| Evento       | Descrição                                                               | Tipo               |
+| ------------ | ----------------------------------------------------------------------- | ------------------ |
+| `brDidClose` | Evento emitido quando o usuário fecha a mensagem, se closable for true. | `CustomEvent<any>` |

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

@@ -0,0 +1,26 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-message
+    state="success"
+    is-feedback
+    message="Campo correto."
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  ></br-message>
+  <br-message
+    state="warning"
+    is-feedback
+    message="A tecla CAPS-LOCK está ativada."
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  ></br-message>
+  <br-message
+    state="danger"
+    is-feedback
+    message="O CPF deve conter apenas dígitos."
+    show-icon
+    aria-label="Mensagem do aria-label para acessibilidade"
+  ></br-message>
+  <br-message state="info" is-feedback show-icon aria-label="Mensagem do aria-label para acessibilidade">
+    <span>Os arquivos devem ser no formato PNG, JPG, PDF e ter no máximo 1GB.</span>
+  </br-message>
+</div>

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

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