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

package/www/pages/components/input/with-message.html

@@ -0,0 +1,42 @@
+<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
+  <br-input id="success01" label="Validação: sucesso" placeholder="Validação: sucesso" class="mr-2">
+    <br-message
+      slot="feedback"
+      state="success"
+      is-feedback
+      message="Mensagem de sucesso"
+      show-icon
+      aria-label="Mensagem de sucesso"
+    ></br-message>
+  </br-input>
+  <br-input id="danger01" label="Validação: danger" placeholder="Validação: danger" class="mr-2">
+    <br-message
+      slot="feedback"
+      state="danger"
+      is-feedback
+      message="Mensagem de erro"
+      show-icon
+      aria-label="Mensagem de erro"
+    ></br-message>
+  </br-input>
+  <br-input id="info01" label="Validação: info" placeholder="Validação: info" class="mr-2">
+    <br-message
+      slot="feedback"
+      state="info"
+      is-feedback
+      message="Mensagem de info"
+      show-icon
+      aria-label="Mensagem de info"
+    ></br-message>
+  </br-input>
+  <br-input id="warning01" label="Validação: warning" placeholder="Validação: warning" class="mr-2">
+    <br-message
+      slot="feedback"
+      state="warning"
+      is-feedback
+      message="Mensagem de warning"
+      show-icon
+      aria-label="Mensagem de warning"
+    ></br-message>
+  </br-input>
+</div>

package/www/pages/components/item/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/pages/components/item/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/pages/components/item/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/pages/components/item/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/pages/components/item/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/pages/components/list/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/pages/components/list/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/pages/components/list/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/pages/components/list/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/pages/components/list/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/pages/components/loading/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/pages/components/loading/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/pages/components/message/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/pages/components/message/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 }),
+        })
+      })
+    })
+  })
+}

package/www/pages/components/message/message.html

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

package/www/pages/components/radio/hidden-label.html

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

package/www/pages/components/radio/index.js

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

package/www/pages/components/radio/radio-group.html

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

package/www/pages/components/radio/slotted.html

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

package/www/pages/components/radio/state.html

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

package/www/pages/components/select/index.js

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

package/www/pages/components/select/multiple.html

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

package/www/pages/components/select/simple.html

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

package/www/pages/components/switch/density.html

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

package/www/pages/components/switch/has-icon.html

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

package/www/pages/components/switch/index.js

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

package/www/pages/components/switch/label.html

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

package/www/pages/components/switch/state.html

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

package/www/pages/components/tag/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/pages/components/tag/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/pages/components/tag/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/pages/components/tag/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/pages/components/tag/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>