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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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