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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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