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

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

@@ -0,0 +1,100 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+### Nomes de Propriedades
+
+Alguns nomes de propriedades foram alterados, conforme abaixo:
+
+| **Propriedade Antiga** | **Propriedade Nova** | **Descrição**                                                                                              | **Tipo**                   | **Padrão** |
+| ---------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------- | ---------- |
+| `ariaLabel`            | `ariaLabel`          | [OPCIONAL] Acessibilidade: define uma cadeia de caracteres para descrever o elemento.                      | `string`                   | `-`        |
+| `checked`              | `checked`            | [OPCIONAL] Se presente, indica que o estado inicial do switch é `true`.                                    | `boolean`                  | `false`    |
+| `disabled`             | `disabled`           | [OPCIONAL] Se presente, indica que o switch está desabilitado.                                             | `boolean`                  | `false`    |
+| `icon`                 | `hasIcon`            | [OPCIONAL] Se presente, adiciona um ícone padrão à chave de alternância.                                   | `boolean`                  | `false`    |
+| `id`                   | `id`                 | [OPCIONAL] ID do componente. Também usado para conectar o rótulo correspondente.                           | `string`                   | `-`        |
+| `label`                | `label`              | [OPCIONAL] Descreve o que o switch faz quando ativado. Sobrescreve o rótulo passado por slot, se presente. | `string`                   | `-`        |
+| `labelChecked`         | `labelOn`            | [OPCIONAL] Rótulo para o switch ativado, auxiliando no entendimento de sua posição.                        | `string`                   | `null`     |
+| `labelNotChecked`      | `labelOff`           | [OPCIONAL] Rótulo para o switch desativado, auxiliando no entendimento de sua posição.                     | `string`                   | `null`     |
+| `name`                 | `name`               | [OPCIONAL] Define o valor do atributo `name` do checkbox subjacente.                                       | `string`                   | `-`        |
+| `right`                | `labelPosition`      | [OPCIONAL] Se presente, posiciona o rótulo a direita do switch.                                            | `right \| left \| top`     | `left`     |
+| `size`                 | `density`            | [OPCIONAL] Ajusta a densidade da área interativa do switch.                                                | `large \| medium \| small` | `medium`   |
+| `top`                  | `labelPosition`      | [OPCIONAL] Se presente, posiciona o rótulo acima do switch.                                                | `right \| left \| top`     | `left`     |
+| `value`                | `value`              | Valor associado ao checkbox quando o switch está ativado.                                                  | `string`                   | `-`        |
+
+### Eventos
+
+Entenda melhor como utilizar os eventos para o componente `<br-switch></br-switch>` no Vue e em Stencil:
+
+#### Vue
+
+| Evento           | Descrição                                                            |
+| ---------------- | -------------------------------------------------------------------- |
+| `onChange`       | Evento emitido quando o estado do checkbox é modificado.             |
+| `update:checked` | Evento emitido para fazer o two-way data binding com a prop checked. |
+
+#### StencilJS
+
+| Evento                      | Descrição                                                                                                     | Tipo                |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `brConnectedCallback`       | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback).     | `CustomEvent<this>` |
+| `brDidLoad`                 | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#componentdidload).      | `CustomEvent<this>` |
+| `brDidRender`               | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback).     | `CustomEvent<this>` |
+| `brDidSwitchToggle`         | Evento customizado emitido para sinalizar a mudança do estado "checked".                                      | `CustomEvent<any>`  |
+| `brDidUpdate`               | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#componentdidupdate).    | `CustomEvent<this>` |
+| `brDisconnectedCallback`    | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback).  | `CustomEvent<this>` |
+| `brShouldUpdate`            | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate). | `CustomEvent<this>` |
+| `brWillLoad`                | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#componentwillload).     | `CustomEvent<this>` |
+| `brWillRender`              | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#componentwillrender).   | `CustomEvent<this>` |
+| `brWillUpdate`              | Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#componentdidupdate).    | `CustomEvent<this>` |
+| `formAssociatedCallback`    | Componente foi inserido em um `<form>`                                                                        | `CustomEvent<this>` |
+| `formDisassociatedCallback` | Componente foi removido de um `<form>`                                                                        | `CustomEvent<this>` |
+
+- *Usando eventos em JSX*: Automaticamente inclui o prefixo "on". Por exemplo, se o evento emitido for chamado `brDidSwitchToggle`, a propriedade será chamada `brDidSwitchToggle`.
+
+```html
+
+<template>
+  <br-switch id="switch-example" brDidSwitchToggle={(event) => {
+    console.log('Estado do switch alterado para:', event.detail);
+  }} />
+</template>
+```
+
+- *Ouvindo eventos de um elemento não JSX*: Ver exemplo abaixo:
+
+```html
+<template>
+  <br-switch></br-switch>
+</template>
+
+<script>
+  const switchElement = document.querySelector('br-switch')
+  switchElement.addEventListener('brDidSwitchToggle', (event) => {
+    /* your listener */
+  })
+</script>
+```
+
+### Slots
+
+O componente `br-switch` possui o slot `default` no StencilJs, que permite a personalização do label do switch.
+
+### 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 Switch no Stencil:
+
+```html
+<br-switch id="switch-default" label="Switch de Alternância" checked ariaLabel="Exemplo de switch de alternância">
+</br-switch>
+```
+
+```html
+<br-switch id="switch-with-labels" label="Notificações" labelOn="Ativado" labelOff="Desativado" checked> </br-switch>
+```
+
+### Considerações Finais
+
+Caso encontre algum problema durante a migração ou surjam dúvidas, entre em contato com a equipe do [Padrão Digital de Governo](https://discord.gg/NkaVZERAT7).

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

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                                                                                               |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Descreve o que o switch faz quando a alternância estiver ativada. A label passada por slot tem precedência sobre a propriedade 'label'. |

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

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

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

@@ -0,0 +1,5 @@
+## Eventos
+
+| Evento          | Descrição                                  | Tipo                  |
+| --------------- | ------------------------------------------ | --------------------- |
+| `radioSelected` | Evento emitido quando a tag é selecionada. | `CustomEvent<string>` |

package/www/assets/stencil-generated-docs/tag/examples/counts.html

@@ -0,0 +1,6 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-tag label="1" color="bg-danger" shape="rounded"></br-tag>
+  <br-tag label="10" color="bg-danger" shape="rounded"></br-tag>
+  <br-tag label="130" color="bg-danger" shape="rounded"></br-tag>
+  <br-tag label="999+" color="bg-danger" shape="rounded"></br-tag>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-tag label="Alta" color="bg-orange-vivid-50" density="small"></br-tag>
+  <br-tag label="Média" color="bg-green-warm-vivid-50" density="medium"></br-tag>
+  <br-tag label="Baixa" color="bg-indigo-warm-vivid-50" density="large"></br-tag>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-tag color="bg-orange-vivid-50" icon-name="fa-solid:car" shape="circle"></br-tag>
+  <br-tag color="bg-green-warm-vivid-50" icon-name="fa-solid:search" shape="circle"></br-tag>
+  <br-tag color="bg-indigo-warm-vivid-50" icon-name="fa-solid:user" shape="circle"></br-tag>
+</div>

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

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

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-tag label="Carro 1" icon-name="fa-solid:car" interaction></br-tag>
+  <br-tag label="Carro 2" icon-name="fa-solid:car" interaction></br-tag>
+  <br-tag label="Carro 3" icon-name="fa-solid:car" interaction></br-tag>
+</div>

package/www/assets/stencil-generated-docs/tag/examples/persistent-interaction.html

@@ -0,0 +1,27 @@
+<div class="row">
+  <div class="col-md">
+    <p class="h4">Seleção única</p>
+    <div class="d-flex align-items-center">
+      <br-tag label="Carro" name="vehicle" icon-name="fa-solid:car" interaction-select></br-tag>
+      <br-tag label="Barco" name="vehicle" icon-name="fa-solid:ship" interaction-select selected></br-tag>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md">
+    <p class="h4">Seleção múltipla</p>
+    <div class="d-flex align-items-center">
+      <br-tag multiple label="Bicicleta" name="multipla" icon-name="fa-solid:bicycle" interaction-select></br-tag>
+      <br-tag multiple label="Barco" name="multipla" icon-name="fa-solid:ship" interaction-select selected></br-tag>
+      <br-tag
+        multiple
+        label="Carro"
+        name="multipla"
+        icon-name="fa-solid:car"
+        interaction-select
+        selected
+        disabled
+      ></br-tag>
+    </div>
+  </div>
+</div>

package/www/assets/stencil-generated-docs/tag/examples/status.html

@@ -0,0 +1,8 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-tag color="bg-danger" shape="rounded" density="large"></br-tag>
+  <br-tag color="bg-warning" shape="rounded" density="medium"></br-tag>
+  <br-tag color="bg-success " shape="rounded" density="small"></br-tag>
+  <br-tag label="Offline" color="bg-danger" shape="rounded" density="large" status></br-tag>
+  <br-tag label="Ausente" color="bg-warning" shape="rounded" density="medium" status></br-tag>
+  <br-tag label="Online" color="bg-success " shape="rounded" density="small" status></br-tag>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5">
+  <br-tag label="Texto e Ícone" color="bg-orange-vivid-50" icon-name="fa-solid:car" density="small"></br-tag>
+  <br-tag label="Texto" color="bg-green-warm-vivid-50" density="large"></br-tag>
+  <br-tag label="Jhon Doe" color="bg-indigo-warm-vivid-50" density="large"></br-tag>
+</div>

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

@@ -0,0 +1,17 @@
+## Propriedades
+
+| Propriedade         | Atributo             | Descrição                                                                                                                                                                                                          | Tipo                                 | Valor padrão            |
+| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------- |
+| `color`             | `color`              | A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.                                                                                  | `string`                             | `''`                    |
+| `customId`          | `custom-id`          | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.                                                                                                                             | `string`                             | ```br-tag-${tagId++}``` |
+| `density`           | `density`            | A propriedade 'density' permite definir a densidade do componente. Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.                                                                          | `"large" \| "medium" \| "small"`     | `DENSITY_SMALL`         |
+| `disabled`          | `disabled`           | Tag deve estar desabilitado.                                                                                                                                                                                       | `boolean`                            | `false`                 |
+| `iconName`          | `icon-name`          | A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto. O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.                                | `string`                             | `''`                    |
+| `interaction`       | `interaction`        | Interação deve ser habilitada.                                                                                                                                                                                     | `boolean`                            | `false`                 |
+| `interactionSelect` | `interaction-select` | Interação de seleção deve ser habilitada.                                                                                                                                                                          | `boolean`                            | `false`                 |
+| `label`             | `label`              | A propriedade 'label' é uma string que representa o texto a ser exibido no componente. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.                | `string`                             | `''`                    |
+| `multiple`          | `multiple`           | A tag permite seleção múltipla.                                                                                                                                                                                    | `boolean`                            | `false`                 |
+| `name`              | `name`               | A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.                 | `string`                             | `''`                    |
+| `selected`          | `selected`           | A tag está selecionada.                                                                                                                                                                                            | `boolean`                            | `false`                 |
+| `shape`             | `shape`              | A propriedade 'shape' define o formato do componente. Valores possíveis: - 'circle': Componente com formato circular. - 'rounded': Componente com bordas arredondadas. - 'default': Componente com formato padrão. | `"circle" \| "default" \| "rounded"` | `SHAPE_DEFAULT`         |
+| `status`            | `status`             | Status deve ser exibido.                                                                                                                                                                                           | `boolean`                            | `false`                 |

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

@@ -0,0 +1,3 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)
+
+Não se aplica a este componente, pois ele não estava presente na versão anterior.

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

@@ -0,0 +1,5 @@
+## Eventos
+
+| Evento        | Descrição                    | Tipo                  |
+| ------------- | ---------------------------- | --------------------- |
+| `valueChange` | Valor atualizado do textarea | `CustomEvent<string>` |

package/www/assets/stencil-generated-docs/textarea/examples/contador.html

@@ -0,0 +1,11 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-textarea
+    class="mr-2"
+    show-counter
+    density="small"
+    maxlength="100"
+    label="Textarea com contador"
+    defaultId="meu-textarea-contador"
+    placeholder="Digite somente números"
+  ></br-textarea>
+</div>

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

@@ -0,0 +1,4 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-textarea label="Densidade baixa" density="small" class="mr-2" placeholder="Digite somente números"></br-textarea>
+  <br-textarea label="Densidade alta" density="large" class="mr-2" placeholder="Digite somente números"> </br-textarea>
+</div>

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

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

@@ -0,0 +1,10 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4"></div>
+<br-textarea
+  is-inline
+  density="small"
+  state="success"
+  label="Label a esquerda"
+  placeholder="Exemplo de textarea com sucesso"
+>
+  <p class="text-base mt-1">Texto auxiliar ao preenchimento.</p>
+</br-textarea>

package/www/assets/stencil-generated-docs/textarea/examples/simples.html

@@ -0,0 +1,7 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-textarea state="success" density="small" class="mr-2" placeholder="Exemplo de textarea com sucesso"></br-textarea>
+
+  <br-textarea state="danger" density="large" class="mr-2" placeholder="Exemplo de textarea com erro"> </br-textarea>
+
+  <br-textarea density="large" class="mr-2" disabled placeholder="Exemplo de textarea desabilitado"> </br-textarea>
+</div>

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

@@ -0,0 +1,15 @@
+## Métodos
+
+### `setValue(newValue: string) => Promise<void>`
+
+Define um novo valor para o textarea.
+
+#### Parâmetros
+
+| Nome       | Tipo     | Descrição                      |
+| ---------- | -------- | ------------------------------ |
+| `newValue` | `string` | - O novo valor a ser definido. |
+
+#### Retorna
+
+Tipo: `Promise<void>`

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

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

@@ -0,0 +1,14 @@
+## 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-textarea-${textareaId++}``` |
+| `density`     | `density`      | Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.                              | `"large" \| "medium" \| "small"`     | `'medium'`                        |
+| `disabled`    | `disabled`     | Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.     | `boolean`                            | `false`                           |
+| `isInline`    | `is-inline`    | Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).                                | `boolean`                            | `false`                           |
+| `label`       | `label`        | Texto exibido como rótulo do input.                                                                      | `string`                             | ---                               |
+| `maxlength`   | `maxlength`    | Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.                   | `number`                             | `0`                               |
+| `placeholder` | `placeholder`  | Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.             | `string`                             | ---                               |
+| `showCounter` | `show-counter` | Mostra o contador com a quantidade máxima de caracteres.                                                 | `boolean`                            | `false`                           |
+| `state`       | `state`        | Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.                      | `"danger" \| "success" \| "warning"` | ---                               |
+| `value`       | `value`        | Valor exibido no textarea. Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa. | `string`                             | ---                               |

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

@@ -0,0 +1 @@
+## Guia de Migração de Web Components de 1.x (em Vue) para 2.x (em Stencil)

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

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição                                                                                                   |
+| ----------- | ----------------------------------------------------------------------------------------------------------- |
+| `"default"` | Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário. |

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

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

package/www/assets/stencil-generated-docs/upload/examples/disabled.html

@@ -0,0 +1,11 @@
+<div class="d-flex flex-column justify-content-evenly mt-5 p-4">
+  <br-upload label="Envio de arquivo" disabled></br-upload>
+  <br-message
+    class="spacing-feedback"
+    state="warning"
+    is-feedback
+    message="Upload desabilitado"
+    show-icon
+    aria-label="Upload desabilitado"
+  ></br-message>
+</div>

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

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

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-upload label="Envio de arquivos" multiple></br-upload>
+</div>

package/www/assets/stencil-generated-docs/upload/examples/restricted.html

@@ -0,0 +1,11 @@
+<div class="d-flex flex-column justify-content-evenly mt-5 p-4">
+  <br-upload label="Envio de arquivo" state="danger" accept="image/png, image/jpeg"></br-upload>
+  <br-message
+    class="spacing-feedback"
+    state="danger"
+    is-feedback
+    message="Os arquivos devem ser no formato PNG ou JPG e ter no máximo 100MB."
+    show-icon
+    aria-label="Os arquivos devem ser no formato PNG ou JPG e ter no máximo 100MB."
+  ></br-message>
+</div>

package/www/assets/stencil-generated-docs/upload/examples/single.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-upload label="Envio de arquivo"></br-upload>
+</div>

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

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

@@ -0,0 +1,9 @@
+## Propriedades
+
+| Propriedade | Atributo   | Descrição                                                                                                                                                                                                                                                                                                                                | Tipo      | Valor padrão         |
+| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------- |
+| `accept`    | `accept`   | Tipos de arquivo permitidos (ex: 'image/*'). Esta propriedade define quais tipos de arquivos podem ser selecionados para upload.                                                                                                                                                                                                         | `string`  | `''`                 |
+| `disabled`  | `disabled` | Indica se o componente está desativado. Quando definido como `true`, o campo de upload se torna não interativo, impedindo que o usuário selecione ou envie arquivos. Isso é útil para controlar a interação do usuário em situações específicas, como durante o carregamento de dados ou quando o formulário está em um estado inválido. | `boolean` | `false`              |
+| `label`     | `label`    | Texto descritivo do campo de upload. Este é o texto que é mostrado no label do textarea.                                                                                                                                                                                                                                                 | `string`  | `'Envio de arquivo'` |
+| `multiple`  | `multiple` | Indica se o componente permite a seleção de múltiplos arquivos. Quando definido como `true`, o usuário pode selecionar mais de um arquivo para upload.                                                                                                                                                                                   | `boolean` | `false`              |
+| `state`     | `state`    | Define o estado visual da mensagem. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.                                                                                                         | `string`  | `UploadState.INFO`   |

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

@@ -0,0 +1,5 @@
+## Slots
+
+| Slot        | Descrição         |
+| ----------- | ----------------- |
+| `"default"` | Descrição do slot |

package/www/assets/wc.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="48px" height="48px"><polygon style="fill:#E74C16;" points="37.183,34.974 27.401,40.452 15.987,40.48 6.59,14.148 32.678,7.371 "/><polygon style="fill:#F76418;" points="20.294,13.09 26.845,38.312 34.683,33.937 30.79,10.364 "/><path style="fill:#EFEDEE;" d="M17.593,18.264l-1.582,5.729l4.171,4.235l6.566-1.706l0.394,1.516  c-1.167,1.697-2.921,3.001-5.072,3.56c-3.981,1.034-8.024-0.808-9.957-4.226l-8.056,2.093l-1.152-4.433l8.056-2.093  c0.025-3.927,2.661-7.504,6.641-8.538c2.15-0.559,4.318-0.274,6.163,0.641l0.394,1.516L17.593,18.264z M1.152,30.219l1.796-0.467  L1.796,25.32L0,25.786L1.152,30.219z"/><g><path style="fill:#BBB8C2;" d="M22.974,30.057c-3.981,1.034-8.024-0.808-9.957-4.226l-8.056,2.093l-0.834-3.21L2.92,25.028   l1.135,4.437l8.056-2.093c1.933,3.418,5.976,5.26,9.957,4.226c2.15-0.559,3.905-1.862,5.072-3.56l-0.088-0.337   C25.969,28.805,24.582,29.64,22.974,30.057z"/><polygon style="fill:#BBB8C2;" points="18.499,16.723 18.11,18.13 24.159,16.558 23.841,15.335  "/><polygon style="fill:#BBB8C2;" points="2.057,28.679 1.223,25.469 0,25.786 1.152,30.219 2.948,29.753 2.63,28.53  "/></g><path style="fill:#EFEDEE;" d="M21.253,24.058l-0.394-1.516c1.167-1.697,2.921-3.001,5.072-3.56  c3.981-1.034,8.024,0.808,9.957,4.226l8.056-2.093l1.152,4.433l-8.056,2.093c-0.025,3.927-2.661,7.504-6.641,8.538  c-2.15,0.559-4.318,0.274-6.163-0.641l-0.394-1.516l6.566-1.706l1.582-5.729l-4.171-4.235L21.253,24.058z M46.848,20.361  l-1.796,0.467l1.152,4.433L48,24.794L46.848,20.361z"/><g><path style="fill:#BBB8C2;" d="M28.857,35.274c3.981-1.034,6.616-4.611,6.641-8.538l8.056-2.093l-0.834-3.21l1.207-0.313   l1.168,4.429l-8.056,2.093c-0.025,3.927-2.661,7.504-6.641,8.538c-2.15,0.559-4.318,0.274-6.163-0.641l-0.088-0.337   C25.632,35.637,27.249,35.691,28.857,35.274z"/><polygon style="fill:#BBB8C2;" points="26.278,21.447 27.301,22.486 21.253,24.058 20.935,22.835  "/><polygon style="fill:#BBB8C2;" points="46.459,23.889 45.626,20.679 46.848,20.361 48,24.794 46.204,25.26 45.886,24.038  "/></g></svg>

package/www/build/br-avatar.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"br-avatar.entry.esm.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: block;\n\n  /**\n   * @prop --border-radius: Border radius of the avatar and inner image\n   */\n  border-radius: var(--border-radius);\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  /**\n   * Executa validações iniciais quando o componente é carregado\n   */\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n  }\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() readonly alt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Largura do ícone no avatar do tipo icônico\n   * */\n  @Prop() readonly iconWidth: string\n\n  /**\n   * Altura do ícone no avatar do tipo icônico\n   */\n  @Prop() readonly iconHeight: string\n\n  /**\n   * Ajuste para a margem de cima do ícone no avatar do tipo icônico\n   */\n  @Prop() readonly iconMarginTop: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  @State() private hasError = false\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  private readonly iconSizes = {\n    small: { height: '32px', width: '40px' },\n    medium: { height: '80px', width: '88px' },\n    large: { height: '128px', width: '136px' },\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    } else if (this.src?.trim().length > 0 && !this.hasError) {\n      return (\n        <span class=\"content\" title={this.alt || this.text}>\n          <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n        </span>\n      )\n    } else {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight?.length > 0 ? this.iconHeight : this.iconSizes[this.density]?.height}\n            width={this.iconWidth?.length > 0 ? this.iconWidth : this.iconSizes[this.density]?.width}\n            aria-hidden=\"true\"\n            style={{\n              'margin-top': this.iconMarginTop?.length > 0 ? this.iconMarginTop : this.iconMarginTops[this.density],\n            }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} aria-disabled={this.disabled}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":[],"mappings":"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"}