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

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

@@ -1,19 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-checkbox class="mb-1" id="check-state-checked" name="check-state-checked" checked label="Marcado"></br-checkbox>
-  <br-checkbox class="mb-1" id="check-state-unchecked" name="check-state-unchecked" label="Não marcado"></br-checkbox>
-  <br-checkbox
-    class="mb-1"
-    id="check-state-disabled"
-    name="check-state-disabled"
-    disabled
-    label="Desativado"
-  ></br-checkbox>
-  <br-checkbox
-    class="mb-1"
-    id="check-state-invalid"
-    name="check-state-invalid"
-    state="invalid"
-    label="Inválido"
-  ></br-checkbox>
-  <br-checkbox id="check-state-valid" name="check-state-valid" state="valid" label="Válido"></br-checkbox>
-</div>

package/www/pages/components/checkbox/vertical.html

@@ -1,12 +0,0 @@
-<div class="d-flex flex-column flex-wrap justify-content-evenly mt-5 p-4">
-  <br-checkbox
-    class="mb-1"
-    id="checkbox-1"
-    autofocus
-    name="checkbox-1"
-    label="Vertical 1"
-    aria-label="Vertical 1"
-  ></br-checkbox>
-  <br-checkbox class="mb-1" id="checkbox-2" name="checkbox-2" label="Vertical 2" aria-label="Vertical 2"></br-checkbox>
-  <br-checkbox id="checkbox-3" name="checkbox-3" label="Vertical 3" aria-label="Vertical 3"></br-checkbox>
-</div>

package/www/pages/components/checkgroup/checkgroup.html

@@ -1,6 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5">
-  <br-checkgroup label="Lista de opções" label-selecionado="Selecionar tudo" label-desselecionado="Desselecionar tudo">
-    <br-checkbox id="ckb-1" name="h-checkbox-1" label="Opção 1" class="mb-1"></br-checkbox>
-    <br-checkbox id="ckb-2" name="h-checkbox-2" label="Opção 2"></br-checkbox>
-  </br-checkgroup>
-</div>

package/www/pages/components/checkgroup/concatenation.html

@@ -1,15 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5">
-  <br-checkgroup label="Grupo Principal" label-selecionado="Selecionar tudo" label-desselecionado="Desselecionar tudo">
-    <br-checkbox id="p2-f1" name="p2-f1" label="Opção 1" class="mb-1"></br-checkbox>
-    <br-checkbox id="p2-f2" name="p2-f2" label="Opção 2" class="mb-1"></br-checkbox>
-
-    <br-checkgroup
-      label="Selecionar grupo"
-      label-selecionado="Selecionar grupo"
-      label-desselecionado="Desselecionar grupo"
-    >
-      <br-checkbox id="p2-f3-1" name="p2-f3-1" label="Opção 3" class="mb-1"></br-checkbox>
-      <br-checkbox id="p2-f3-2" name="p2-f3-2" label="Opção 4" class="mb-1"></br-checkbox>
-    </br-checkgroup>
-  </br-checkgroup>
-</div>

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

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

package/www/pages/components/collapse/accordion-behavior.html

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

package/www/pages/components/collapse/collapse-with-different-icons.html

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

package/www/pages/components/collapse/collapse-with-icon-position.html

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

package/www/pages/components/collapse/different-icons.html

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

package/www/pages/components/collapse/icon-position.html

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

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

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

package/www/pages/components/divider/bleed.html

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

package/www/pages/components/divider/border-style.html

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

package/www/pages/components/divider/color.html

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

package/www/pages/components/divider/horizontal.html

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

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

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

package/www/pages/components/divider/slot-content-alignment.html

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

package/www/pages/components/divider/thickness.html

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

package/www/pages/components/divider/vertical.html

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

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

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

package/www/pages/components/dropdown/simples.html

@@ -1,28 +0,0 @@
-<div class="mt-5 p-4">
-  <p>Clique no menu abaixo para abrir o dropdown.</p>
-  <br-dropdown>
-    <br-button slot="trigger" shape="circle">
-      <br-icon icon-name="fa6-solid:ellipsis-vertical"></br-icon>
-    </br-button>
-    <br-list slot="target" list-title="Título (opcional)">
-      <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>
-      <span class="br-divider"></span>
-    </br-list>
-  </br-dropdown>
-</div>

package/www/pages/components/icon/flip.html

@@ -1,5 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-icon icon-name="fa6-solid:f"></br-icon>
-  <br-icon icon-name="fa6-solid:f" flip="horizontal"></br-icon>
-  <br-icon icon-name="fa6-solid:f" flip="vertical"></br-icon>
-</div>

package/www/pages/components/icon/font-awesome.html

@@ -1,5 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-icon icon-name="fa-brands:chromecast"></br-icon>
-  <br-icon icon-name="fa-regular:envelope"></br-icon>
-  <br-icon icon-name="fa-solid:camera"></br-icon>
-</div>

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

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

@@ -1,3 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <p>Ícone alinhado <br-icon icon-name="fa-solid:eye" is-inline></br-icon> verticalmente ao texto</p>
-</div>

package/www/pages/components/icon/rotate.html

@@ -1,6 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-icon icon-name="fa-solid:biking"></br-icon>
-  <br-icon icon-name="fa-solid:biking" rotate="90deg"></br-icon>
-  <br-icon icon-name="fa-solid:biking" rotate="180deg"></br-icon>
-  <br-icon icon-name="fa-solid:biking" rotate="270deg"></br-icon>
-</div>

package/www/pages/components/icon/width-height.html

@@ -1,3 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-icon icon-name="fa-regular:comment-dots" width="72" height="48"></br-icon>
-</div>

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

@@ -1,11 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-input id="small" label="Densidade alta" placeholder="Densidade alta" density="small" class="mr-2"></br-input>
-  <br-input
-    id="medium"
-    label="Densidade padrão"
-    placeholder="Densidade padrão"
-    density="medium"
-    class="mr-2"
-  ></br-input>
-  <br-input id="large" label="Densidade baixa" placeholder="Densidade baixa" density="large" class="mr-2"></br-input>
-</div>

package/www/pages/components/input/highlight.html

@@ -1,6 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-input id="highlight" label="Destaque" placeholder="Destaque" is-highlight>
-    <br-icon slot="icon" icon-name="fa-solid:user" aria-hidden="true"></br-icon>
-    <br-icon slot="action" icon-name="fa-solid:search" aria-hidden="true"></br-icon>
-  </br-input>
-</div>

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

@@ -1,27 +0,0 @@
-if (!window.elementsToListen && !window.eventsToListen) {
-  const elementsToListen = document.querySelectorAll('br-input')
-  const eventsToListen = ['click', 'valueChange']
-  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 }),
-        })
-      })
-    })
-  })
-
-  function validateForm() {
-    const input = document.querySelector('#pattern')
-    if (!input.validity.valid) {
-      alert('Por favor, insira um código de país válido com três letras.')
-      return false // Impede o envio do formulário
-    }
-    return true // Permite o envio do formulário
-  }
-}

package/www/pages/components/input/inline.html

@@ -1,3 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-input id="inline" label="Label / Rótulo" placeholder="Placeholder" is-inline></br-input>
-</div>

package/www/pages/components/input/propriedades.html

@@ -1,86 +0,0 @@
-<div class="d-flex flex-wrap justify-content-between mt-5 p-1">
-  <!-- Campo com Min e Max -->
-  <br-input
-    id="min-max"
-    type="number"
-    min="1"
-    max="5"
-    label="Campo com Min e Max (5 caracteres)"
-    placeholder="Escolha um número entre 1 e 5"
-    title="Limite de 1 a 5"
-    density="large"
-    class="mr-2"
-  ></br-input>
-
-  <!-- Campo com Autocorrect -->
-  <br-input
-    id="autocorrect"
-    type="text"
-    autocorrect="on"
-    label="Campo com Autocorrect (correção automática)"
-    placeholder="Digite seu texto com correção automática"
-    title="Correção ortográfica ativada"
-    density="large"
-    class="mr-2"
-    aria-describedby="autocorrect-description"
-  ></br-input>
-
-  <!-- Campo com MinLength e MaxLength -->
-  <br-input
-    id="min-max-length"
-    type="text"
-    minLength="1"
-    maxLength="10"
-    label="Campo com MinLength e MaxLength(10)"
-    placeholder="Digite um texto de até 10 caracteres"
-    title="Limite de 1 a 10 caracteres"
-    density="large"
-    class="mr-2"
-  ></br-input>
-
-  <!-- Campo com Pattern -->
-  <br-input
-    id="country-code-pattern"
-    type="text"
-    pattern="[A-Za-z]{3}"
-    label="Campo com Pattern"
-    placeholder="Digite o código de país com três letras"
-    title="Formato de código de país de três letras (ex: BRA)"
-    density="large"
-    class="mr-2"
-    required
-    aria-required="true"
-    aria-describedby="pattern-description"
-  ></br-input>
-
-  <!-- Campo de Nome de Usuário com Spellcheck -->
-  <br-input
-    type="text"
-    id="username"
-    name="username"
-    label="Campo com Spellcheck (Correção Ortográfica)"
-    placeholder="Digite seu nome de usuário"
-    title="Verifique a ortografia do seu nome de usuário"
-    spellcheck="true"
-    aria-label="Nome de usuário com verificação ortográfica"
-    density="large"
-    class="mr-2"
-    aria-describedby="username-description"
-  ></br-input>
-  <!-- Campo de Nome de Usuário com Step -->
-  <br-input
-    type="number"
-    id="points"
-    name="points"
-    label="Campo com Step (incremento de 3)"
-    placeholder="Digite a quantidade de pontos"
-    step="3"
-    title="Digite um número de pontos com incremento de 3"
-    density="large"
-    class="mr-2"
-    required
-    min="0"
-    aria-label="Pontos com incremento de 3"
-    aria-describedby="points-info"
-  ></br-input>
-</div>

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

@@ -1,25 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-input id="disabled" label="Disabled" placeholder="Disabled" disabled class="mr-2"></br-input>
-  <br-input
-    id="success"
-    label="Validação: sucesso"
-    placeholder="Validação: sucesso"
-    state="success"
-    class="mr-2"
-  ></br-input>
-  <br-input
-    id="danger"
-    label="Validação: danger"
-    placeholder="Validação: danger"
-    state="danger"
-    class="mr-2"
-  ></br-input>
-  <br-input id="info" label="Validação: info" placeholder="Validação: info" state="info" class="mr-2"></br-input>
-  <br-input
-    id="warning"
-    label="Validação: warning"
-    placeholder="Validação: warning"
-    state="warning"
-    class="mr-2"
-  ></br-input>
-</div>

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

@@ -1,15 +0,0 @@
-<div class="d-flex flex-wrap justify-content-evenly mt-5 p-4">
-  <br-input id="button" label="Com botão à direita" placeholder="Com botão à direita">
-    <br-icon slot="action" icon-name="fa-solid:search" height="16" aria-hidden="true"></br-icon>
-  </br-input>
-  <br-input
-    label="Senha"
-    type="password"
-    placeholder="Placeholder"
-    help-text="Informe a senha com 06 caracteres e no máximo 08 caracteres"
-  >
-  </br-input>
-  <br-input id="icon" label="Com ícones" placeholder="Com ícones">
-    <br-icon slot="icon" icon-name="fa-solid:user" aria-hidden="true"></br-icon>
-  </br-input>
-</div>