# Componentes EletroDS — E-PROC > Gerado do guide vivo em 2026-07-15. Fonte: `content/9.design-patterns/6.componentes/`. Não editar à mão — re-gerar. ## Introdução _Visão geral dos Componentes do ME — o que esperar, como estão organizados, hierarquia EletroDS → Nuxt UI e links relacionados._ A aba Componentes é a lente micro: o componente em si — como se parece, suas variantes, tipos e estados, e quando usar cada um em tela. É conteúdo de Design (não referência de API): o detalhe de implementação fica no doc técnico do [EletroDS](https://eletro.design). O comportamento das telas vive em Padrões. **Hierarquia (sempre nesta ordem):** EletroDS interno → Nuxt UI → Vue puro. Cada categoria lista primeiro os componentes do **EletroDS**; o Nuxt UI completa quando não há equivalente. **O que você encontra aqui:** - **Formulários** — campos de entrada, seleção e composição de filtros. - **Navegação** — orientação e movimento entre telas e seções. - **Visualização de dados** — tabelas, cabeçalhos e identificadores. - **Ações** — botões e barras de ação. - **Feedback & Overlays** — status, carregamento e camadas sobre a tela. --- ## Button _Hierarquia, variantes e estados do botão no ME — o UButton do Nuxt UI, tematizado._ O botão dispara a ação de uma tela. O que importa não é qual cor existe, e sim a **hierarquia**: cada contexto tem **uma** ação principal, e o visual precisa deixar isso óbvio à primeira leitura. ## Hierarquia O Nuxt UI expõe 7 cores × 6 variantes (42 combinações). O ME usa só este subconjunto — escolha pela **importância da ação**, não pela estética: | Nível | Como | Quando — e por quê | |-------|------|--------------------| | **Primária** | `color="primary"` (solid) | A ação que a tela quer que você faça (CTA). **Uma só por contexto** — dois primários competindo diluem o foco e o usuário hesita. | | **Secundária** | `color="neutral" variant="outline"` | Ação de apoio relevante. Presente e clicável, mas sem roubar a atenção do primário. | | **Terciária** | `color="neutral" variant="ghost"` | Ação frequente de baixo peso (toolbar, só-ícone). Peso visual mínimo para não poluir áreas densas. | | **Destrutiva** | `color="error"` | Excluir/remover. A cor sinaliza risco **antes** do clique; quando irreversível, exige confirmação (ver Excluir). | | **Confirmação** | `color="success"` | Uso pontual, em confirmações positivas explícitas. Não é o CTA padrão — não substitui o primário. | ## Tamanhos & largura | Quero… | Use | Por quê | |--------|-----|---------| | Densidade de tabela | `size="sm"` | Cabe na altura da linha sem quebrar o ritmo. | | Padrão das telas | `size="md"` (default) | Tamanho de referência do produto. | | Destaque / telas amplas | `size="lg"` · `xl` | CTA que precisa de presença. | | Largura total | `block` | Só em **mobile** e **rodapé de modal** — alvo de toque maior e ação única em foco em telas estreitas. Evite no desktop (botão esticado perde a leitura de hierarquia). | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Ação disponível. | | Hover / focus | **Foco sempre visível** (o teclado depende disso); acionável por `Enter`/`Espaço`. | | `disabled` | Botão inerte — use quando a ação não se aplica ao contexto. Percebido **além da cor** (opacidade + `aria-disabled`). | | `loading` / `loading-auto` | Spinner no botão e bloqueia o reclique; **mantém o rótulo** (não vira só ícone) e marca `aria-busy`. `loading-auto` liga sozinho enquanto a promise do `@click` resolve. | | `square` + `icon` | Botão só-ícone — exige **nome acessível** (`aria-label`); o ícone não basta para leitor de tela. | ## Onde se aplica ## No código É o **`UButton` do Nuxt UI**, tematizado pelo ME (não há componente EDS próprio). Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: [ui.nuxt.com/docs/components/button](https://ui.nuxt.com/docs/components/button). Aqui o foco é o uso em Design. Para **fileiras de ações** (várias ações num header/toolbar), não enfileire botões soltos — use o ButtonBar. ## Acessibilidade - Botão só-ícone (`square` + `icon`) precisa de **nome acessível** (`aria-label`) — o ícone não basta para leitores de tela. - **Foco visível** sempre; ordem de foco coerente com a leitura. Acionável por `Enter`/`Espaço`. - Alvo de toque **≥ 44px**; em densidade de tabela (`size="sm"`), garanta a área clicável. - `disabled`/`loading` percebidos **além da cor** (`aria-disabled` / `aria-busy`). - Hierarquia e risco nunca **só** pela cor — a destrutiva (`error`) vem com rótulo claro e, quando crítica, confirmação. ## Labeling Rótulo de botão = **verbo + entidade explícita** ("Novo fornecedor", não só "Novo") — assim a ação se explica fora de contexto. A escolha do verbo (Novo / Adicionar / Gerar) segue Voz e conteúdo e o pattern Adicionar. --- ## ButtonBar _A barra de ações do ME — botões com overflow "Mais ações", menu de opções e tooltips. O miolo do subheader._ O ButtonBar é uma fileira de botões de ação que colapsa o excedente em Mais ações conforme falta espaço. É o miolo do Subheader e a forma canônica de apresentar as ações de suporte de uma tela — nunca espalhe botões soltos. ## Uso em tela Lê-se da esquerda pra direita, em ordem de importância. As ações que cabem ficam visíveis; o resto recolhe em Mais ações (overflow responsivo) — então a barra nunca "estoura" a largura. Ações pouco frequentes ou administrativas vão no menu Opções (à direita). Cada botão pode ter tooltip (`description`) para esclarecer um ícone sem texto. Mantenha 2–3 ações visíveis no máximo; acima disso, deixe o overflow decidir. A ação primária da tela ("Novo X") não vive aqui — ela é o split do Subheader; o ButtonBar carrega as secundárias. ## Aplicação A mesma barra aparece em vários níveis do produto: | Onde | Ações típicas | |------|---------------| | **Subheader da index** | Editar · Duplicar · Arquivar · Mais ações | | **Toolbar de documento** | Mover para projeto · Enviar follow up · Exportar | | **Barra de seleção (massa)** | Exportar · Cancelar selecionados | | **Cabeçalho de seção** | ações locais daquele bloco | O comportamento (overflow, tooltip, opções) é idêntico em todos; muda só o conjunto de ações. ## Variantes Escolha pelo cenário: | Quero… | Use | |--------|-----| | Cor padrão de toda a barra | `color` na barra (`primary` · `neutral` · `error` · `success` · `warning`) | | Cor só de um botão | `color` no objeto da ação (sobrepõe a barra) | | Estilo dos botões | `variant` (`ghost` em toolbar, `outline` para destacar) | | Densidade | `size` (`sm` em tabela densa · `md` padrão · `lg`) | | Menu de ações secundárias | `options` (vira o menu **Opções**) | | Conteúdo extra entre ações e opções | slot `default` (ex.: abas, filtros) | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Ações visíveis até caber; excedente em **Mais ações**. | | `disabled` (por ação) | Botão inerte — use quando a ação não se aplica ao contexto atual. | | `loading` (por ação) | Spinner no botão durante a operação. | | Overflow responsivo | `visibleActions` fixa quantas ficam visíveis; `maxVisibleActions` limita o teto antes do overflow. | ## No código `` é um componente EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: [eletro.design/components/buttonbar](https://eletro.design/components/buttonbar). Aqui o foco é o uso em Design. ## Acessibilidade Ações só com ícone exigem rótulo acessível (não dependa só do tooltip, que aparece no hover). O menu Mais ações e o Opções precisam ser alcançáveis e operáveis por teclado. Estados `disabled`/`loading` devem ser percebidos além da cor. ## Onde se aplica --- ## Subheader _A faixa de controle no topo da index e do documento — CTA "Novo X", ButtonBar, busca, gráfico e view switcher. Três variantes._ O Subheader é a faixa de controle logo abaixo do header global. Ele monta numa peça só o que antes seriam vários elementos soltos: o toggle de sidebar, a ação primária ("Novo X", split com menu), a ButtonBar ao centro, a busca, o toggle de gráfico e o view switcher. É o ponto onde mora a hierarquia de ações de uma index. ## Uso em tela Três regiões — esquerda · centro · direita. A esquerda traz o toggle de sidebar e a ação primária; o centro, a ButtonBar; a direita, busca, gráfico e a troca de visualização. Como tudo vem do bloco, a posição e o espaçamento já saem padronizados — você passa props, não recria layout. A ação primária ("Novo X") fica sempre à esquerda e usa o split quando há mais de um tipo a criar (ex.: "Nova transação ▾"). As ações secundárias vão na ButtonBar; as de tela (busca, gráfico, view) ficam à direita. ## Aplicação A variante muda conforme a tela: | Tela | Variante | O que mostra | |------|----------|--------------| | **Index** (listagem) | `primary` | toggle sidebar · split "Novo X" · ButtonBar · busca · gráfico · view switcher | | **Documento / formulário** | `secondary` | ButtonBar ao centro · **Voltar** e **Confirmar** à direita | | **Toolbar embutida** (dentro de um bloco) | `tertiary` | só a ButtonBar — ignora CTA/busca/etc. | ## Variantes | Quero… | Use | |--------|-----| | Topo de uma index | `variant="primary"` | | Topo de um documento/edição com Voltar + Confirmar | `variant="secondary"` (props `back`, `confirm`) | | Só uma fileira de ações, sem CTA | `variant="tertiary"` | ## Regiões (variante primary) | Região | Prop | O que é | |--------|------|---------| | Toggle de sidebar | `toggleSidebar` | hambúrguer que abre/fecha a sidebar | | Ação primária | `createActions` | botão "Novo X" + menu de tipos (split) | | Ações de suporte | `buttonBar` | a ButtonBar central | | Busca | `search` | campo de busca da listagem | | Gráfico | `toggleChart` | alterna a visão de gráfico (com chip de notificação) | | View switcher | `gridMode` | troca Tabela · Lista · Cards · Preview | ## Subheader de documento No documento o subheader tem regiões fixas: à **esquerda**, as ações do status (até 3 aparentes + **"Mais ações"** no overflow); à **direita**, **"Opções"** (configurações da tela). As ações mudam conforme o status/fase — ver Ações por status. Quando o documento aparece em **preview** (master-detail da index), surge um ícone **"abrir em outra janela"** à direita de "Opções" — atalho para a página única. ## Responsividade Segue a régua geral em Foundations › Breakpoints; o que é próprio do subheader: | Largura | Comportamento | |---------|---------------| | **Desktop** · ≥ 1024px | Layout completo — título, todas as CTAs e ações secundárias visíveis. | | **Tablet** · 640–1024px | Título + CTA primária + no máximo 1 secundária; as demais recolhem em "Mais ações". | | **Mobile** · < 640px | No mobile o subheader **perde** o hambúrguer (vai pro **header**), o "Novo X" (vira **FAB**) e a busca (vai pro **header**) — sobram só as **ações em massa** + gráfico/view. As secundárias **colapsam em "Mais ações"** (nunca rolam na horizontal nem quebram em linhas). | ## Overflow das ações (ResizeObserver) O `MeSubheader` observa a largura da ButtonBar (**ResizeObserver**): as ações que não cabem **colapsam progressivamente** num **"Mais ações"** (ícone + label + chevron). **Nunca** scroll horizontal, **nunca** quebra de linha. Ordene por frequência de uso; separe a ação destrutiva por um divisor. Não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps. ## Gotchas de montagem (verificados na index real) - **Altura 56px** (`h-14`). O `MeSubheader` é **flush** → dê `w-full h-full` + wrapper `items-stretch`, senão o gap vira **linha dupla** na borda inferior. - **`inheritAttrs: false`**: a `class`/`style` que você passa vão pro inner, não pro root — para esticar o root, estilize o wrapper. - **Busca é gatilho:** abre o painel de busca, **não** busca inline no campo. ## No código `` é um bloco EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: [eletro.design/blocks/subheader](https://eletro.design/blocks/subheader). Aqui o foco é o uso em Design. ## Acessibilidade O toggle de sidebar e os botões só-ícone (gráfico, view) precisam de rótulo acessível. A ação primária split deve abrir o menu por teclado. Garanta ordem de foco coerente com a leitura (esquerda → centro → direita). ## Onde se aplica --- ## DropdownMenu _Menu de ações disparado por clique (Nuxt UI) — o "mais ações" (kebab) de cada linha._ O DropdownMenu é o menu de ações aberto por clique. Na index, é o menu de mais ações por linha (gatilho `ellipsis-vertical`); também é o menu Opções da ButtonBar e o **menu de interação de uma entidade** (clicar no nome de um Fornecedor, Comprador ou Responsável abre Ver detalhes · Enviar para o Genius · Enviar mensagem). ## Uso em tela Itens com ícone + rótulo, separadores por grupo e a ação destrutiva isolada ao fim (após divisor). Convenção do ME: `ellipsis-vertical` = menu individual da linha; `ellipsis` (horizontal) = "Mais ações" da tela — não troque um pelo outro. O comportamento de cada item vive no padrão correspondente (Editar, Excluir, Fixar…). ## Aplicação O mesmo menu aparece em papéis distintos — muda o gatilho e o conjunto de itens; o comportamento (abrir por clique, teclado, foco) é idêntico: | Onde | Gatilho | Itens típicos | |------|---------|---------------| | **Ações por linha** (index/lista) | kebab `⋮` (`ellipsis-vertical`) | Ver · Editar · Duplicar · Excluir (destrutiva isolada) | | **Opções** da ButtonBar | "Opções" (`ellipsis` + rótulo) | Imprimir · Exportar PDF · Histórico de versões · Configurações de exibição | | **Interação de entidade** (documento) | nome da entidade + chevron | Ver detalhes · Enviar para o Genius · Enviar mensagem | ## Estados | Estado | Comportamento | |--------|---------------| | Fechado | Só o gatilho; o chevron aponta para baixo. | | Aberto (ativo) | O gatilho fica **realçado** (estado selecionado) e o chevron gira; o menu ancora ao gatilho. | | Item destrutivo | Isolado após um divisor, cor `error`. | | Item desabilitado | Inerte, percebido além da cor (`aria-disabled`); tooltip quando o motivo ajudar. | ## No código `UDropdownMenu` — doc técnica em [ui.nuxt.com/docs/components/dropdown-menu](https://ui.nuxt.com/docs/components/dropdown-menu). ## Acessibilidade - Trigger só-ícone (kebab) precisa de **nome acessível** (ex.: `aria-label="Mais ações"`) e `aria-expanded`. - **Teclado completo:** abre por `Enter`/`Espaço`, navega com setas, fecha com `Esc` e por clique fora — **sem disparar** nenhuma ação ao fechar. - Ao fechar, o **foco volta ao trigger**. - Item desabilitado: percebido além da cor (`aria-disabled`) e, quando útil, tooltip explicando o motivo. - Ações destrutivas isoladas após divisor (ver Mais ações). ## Onde se aplica --- ## FAB _Botão de ação flutuante — o que a ação primária da tela vira no mobile, fixo acima da NavBar._ ## Uso em tela Um botão circular fixo no **canto inferior direito**, **acima da NavBar**, com a cor primária e um ícone (em geral `+`). Aparece **só no mobile**: no desktop/tablet a ação primária vive no Subheader. Use **um único** FAB por tela — ele carrega a ação mais esperada do contexto (criar/adicionar). Ações secundárias **não** viram FAB: ficam no Subheader (rolando) ou em "Mais ações". Quando a ação primária abre tipos (split "Novo X"), o FAB abre um **modal-sheet** com as opções — não um menu solto. ## Responsividade Segue a régua geral em Foundations › Breakpoints: | Largura | Comportamento | |---------|---------------| | **Desktop / Tablet** · ≥ 640px | Sem FAB — a ação primária fica no Subheader. | | **Mobile** · < 640px | A ação primária vira FAB (inferior direito, fixo acima da NavBar). | ## Acessibilidade - O FAB precisa de **rótulo acessível** (`aria-label`) — é um botão só com ícone. - Alvo de toque confortável (≥ 44px) e **contraste** suficiente sobre o conteúdo. - Não deve **cobrir** conteúdo essencial nem a NavBar; fica acima dela, com folga. ## No código Não é um componente próprio: é um **botão posicionado** (UButton `rounded-full`, cor primária, `position: fixed`/`absolute` no canto inferior direito) — ver Button. ## Onde se aplica --- ## CriterionInput _O critério ativo da Filter Bar (campo · operador · valor) — props, variantes, estados e API real do EletroDS._ O CriterionInput representa um critério de filtro — uma peça segmentada campo · operador · valor, com remoção opcional. É a unidade que compõe e edita os filtros na Filter Bar. O *comportamento* de filtragem (como o critério é criado, editado e aplicado) vive no padrão Filtrar; aqui está a ficha do componente. ## Uso em tela Aparece na Filter Bar, um por critério ativo. Lê-se da esquerda pra direita — campo · operador · valor — e cada segmento é clicável para editar aquele passo; o × remove na hora, sem confirmação. Use sempre que houver um filtro aplicado visível; nunca recrie um "chip de filtro" à mão. > **Alinhamento (verificado na index real):** na Filter Bar o `MeCriterionInput` roda com **`size="sm"` + `deletable`**, e os **controles de filtro ao lado** (Selects/filtros rápidos) usam **o MESMO `size`** — mesma altura. Size divergente entre eles = barra desalinhada (bug recorrente). ## Aplicação O mesmo critério reaparece em três momentos do filtro de uma index: | Onde | O critério representa | |------|-----------------------| | **Filtros aplicados** (Filter Bar) | um filtro ativo e editável (ex.: `Status = Em análise`) | | **Filter Search** (criar critério) | o resultado dos 3 passos campo · operador · valor | | **Seleção em massa** | os critérios ficam `disabled` enquanto a seleção está ativa — ver Ações em massa | ## Variantes A apresentação muda por modo e por tipo do campo — escolha pelo cenário: | Quero… | Use | |--------|-----| | Critério padrão, editável e removível | `deletable` | | Critério dentro de uma barra densa (tabela/index) | `compact` *(ignora `deletable`)* | | Critério somente-leitura (ex.: filtros desabilitados durante seleção em massa) | `disabled` | | Esconder a troca de campo/operador (critério fixo) | `hideField` / `hideOperator` | | Ajustar densidade | `size="sm" \| "md" \| "lg"` *(padrão `md`)* | O valor se adapta ao `field.type`: `object` → lista de opções (estática via `field.options.items` ou assíncrona via função que retorna `Promise`); `date` → seletor de data; `number` → numérico; `string` → texto; `boolean` → alternância. Operadores inativos não aparecem por padrão — para incluí-los, liste-os em `operators` (ex.: `['equal', 'different', 'empty']`). ## Valor múltiplo (vários valores num critério) Alguns operadores aceitam **mais de um valor** no mesmo critério — o campo de valor vira uma entrada múltipla (várias etiquetas/opções, não um único valor): - **Texto múltiplo** (`string`) — operadores `contain_and` · `contain_or` · `not_contain_and` · `not_contain_or`: digita-se vários termos separados por um **delimitador**. Controle por `criterion.options`: **`delimiter`** (string ou RegExp que separa os valores) e **`maxLength`** (máximo de valores). - **Data múltipla** (`date`) — `between` (intervalo início–fim) e os relativos `after`/`before`/`next`/`last`. Para várias datas soltas ou vários intervalos, use o componente InputDateMultiple. - **Seleção múltipla** (`object`) — as opções vêm de `field.options.items` (estáticas ou `Promise`); combina com os operadores de conjunto (`contain_*`). ```ts // criterion.options — para operadores de valor múltiplo { maxLength?: number, delimiter?: string | RegExp, items?: any[] /* opções do tipo 'object' */ } ``` ## Estados | Estado | Comportamento | |--------|---------------| | Default | Editável: campo, operador e valor reabrem o passo correspondente. | | `deletable` | Exibe o botão de remover (emite `remove`). | | `disabled` | Impede edição — usado quando a filter-bar é desativada por outro modo (ver Ações em massa). | | `compact` | Layout condensado para barras densas; sem botão de remover. | ## Responsividade O critério adapta-se por **densidade**, não por colapso — quem lida com a falta de espaço é a barra que o contém, com scroll horizontal (ver Filter Bar). No próprio CriterionInput: | Recurso | Efeito | |---------|--------| | `size` — `sm` · `md` · `lg` | Ajusta altura e densidade ao contexto (`sm` em tabelas/barras densas, `md` padrão). | | `compact` | Layout condensado para barras cheias; o botão de remover não aparece (o `deletable` não tem efeito). | | Valor longo | Trunca no segmento de valor, preservando campo · operador legíveis; quem some primeiro é o valor, nunca o campo. | ## No código `` é um componente EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico do EletroDS: [eletro.design/components/criterioninput](https://eletro.design/components/criterioninput). Aqui o foco é o uso em Design; o detalhe de implementação vive lá. ## Acessibilidade Cada segmento é um alvo clicável — garanta rótulo acessível para campo, operador, valor e remover. O estado `disabled` precisa ser percebido além da cor (opacidade + `aria-disabled`); não dependa só do tom para sinalizar "filtro inativo". ## Onde se aplica --- ## InputNumber _Valor numérico com stepper (− / +) — quantidade, preço. Respeita min, max e step._ O InputNumber é o campo de valor numérico com stepper (− / +): quantidade de itens, preço, prazo em dias. Garante limites (`min`/`max`) e incremento (`step`). Vive dentro de um FormField. ## Variantes | Quero… | Use | |--------|-----| | Limitar faixa | `min` / `max` | | Incremento por clique | `step` | | Densidade | `size` | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Valor editável por digitação ou pelo stepper (− / +). | | No limite (`min`/`max`) | O stepper desabilita a direção que estouraria a faixa; valor fora do limite é corrigido e avisado por texto (não só cor). | | Desabilitado | Campo e steppers inertes quando o valor não se aplica ao contexto. | ## No código `UInputNumber` — doc técnica em [ui.nuxt.com/docs/components/input-number](https://ui.nuxt.com/docs/components/input-number). ## Acessibilidade - Permita **digitação direta** além dos botões de stepper; cada botão (+/−) com **nome acessível**. - Semântica de spinbutton: `aria-valuenow`/`aria-valuemin`/`aria-valuemax`; **setas** ↑/↓ ajustam o valor. - **Foco visível**; alvo ≥ 44px nos steppers. - Erro/limite anunciado por texto, não só por cor. --- ## InputMultiple _Múltiplos valores como tags, com overflow e contador. Estende o UInputTags._ O InputMultiple captura vários valores num campo só, como tags removíveis, com overflow + contador quando passam da largura (ex.: categorias, e-mails). Para montar um subconjunto a partir de um catálogo grande movendo itens entre listas, use o DualList. Vive dentro de um FormField. ## Variantes | Quero… | Use | |--------|-----| | Contador de excedentes | `counter` (ex.: "+2") | | Separador ao digitar | `delimiter` (vírgula, Enter) | | Densidade | `size` | ## No código `` é um componente EletroDS. Doc técnica em [eletro.design/components/inputmultiple](https://eletro.design/components/inputmultiple). Aqui o foco é o uso em Design. ## Acessibilidade - Cada tag removível **por teclado**; o botão de remover (×) tem nome acessível (ex.: "Remover {valor}"). - Adição/remoção de valores anunciada (`aria-live`); o contador de overflow ("+N") também acessível. - Rótulo do campo associado (FormField); **foco visível** ao navegar entre tags. - Valor inválido/duplicado sinalizado por texto, não só por cor. --- ## Form _Orquestra os campos — validação, schema e submit. Agrupa os FormFields de uma tela._ O Form é o container que orquestra um formulário: agrupa os FormFields, valida (por schema), reúne o estado e dispara o submit. É o que transforma campos soltos numa tela de cadastro/edição coerente. ## Variantes | Quero… | Use | |--------|-----| | Validar por schema | `schema` (Zod/Valibot/Yup) + `state` | | Quando validar | `validate-on` (`input` · `blur` · `submit`) | | Erro por campo | propaga para o `error` de cada FormField | ## Onde se aplica ## No código `UForm` — doc técnica em [ui.nuxt.com/docs/components/form](https://ui.nuxt.com/docs/components/form). ## Acessibilidade Submeter por Enter; ao falhar a validação, focar o primeiro campo com erro e anunciá-lo. As ações (Salvar/Cancelar) ficam no rodapé (ver gabarito de Formulário). --- ## InputDate _Input de data do EletroDS (MeInputDate) — digitação, calendário, intervalo e dias desabilitados; props, variantes e estados._ ## Uso em tela Um único campo de data: digita-se a data (`dd/mm/aaaa`) ou, com `datepicker`, escolhe-se num calendário. O valor é controlado por `v-model`. Vive dentro de um FormField (rótulo, ajuda, erro) como qualquer campo. ## Variantes Escolha pelo cenário: | Quero… | Use | |--------|-----| | Só digitar a data | padrão (sem `datepicker`) | | Escolher num calendário | `datepicker` | | Selecionar um período (de–até) | `datepicker` + `range` | | Bloquear dias úteis / fins de semana | `disabledWeekdays` / `disabledWeekends` | | Ajustar aparência | `color` · `size` · `variant` · `highlight` | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Editável por digitação; abre o calendário quando `datepicker`. | | `disabled` | Impede edição e abertura do calendário. | | `highlight` | Realça o campo com a cor atual (semelhante ao foco) — útil para erro/validação. | | Erro (via FormField) | A mensagem e o `required` vêm do FormField que o envolve. | ## Múltiplas datas — `MeInputDateMultiple` Quando o campo precisa de **várias datas** (não uma só), use o componente irmão **`MeInputDateMultiple`**. Cada data escolhida vira uma **tag** no campo; o `v-model` é um **array** de `CalendarDate`. | Quero… | Use | |--------|-----| | Várias datas soltas | padrão (`v-model` = array de `CalendarDate`) | | Escolher no calendário | `datepicker` | | Vários **intervalos** (início–fim) | `range` → `v-model` vira array de `{ start, end }` | | Bloquear dias úteis / fins de semana | `disabledWeekdays` / `disabledWeekends` | | Manter em 1 linha (tags que sobram viram contador) | `counter` *(sem ele, cresce até 2 linhas + scroll)* | | Aparência | `color` · `size` · `variant` · `highlight` | Emite `addTag` / `removeTag` (ao adicionar/remover uma data) e `invalid` (data inválida), além de `focus`/`blur`. Funciona dentro de um FormField como o `MeInputDate`. É também o valor de um critério de filtro com **data múltipla** — ver CriterionInput › Valor múltiplo. ## No código `` é um componente EletroDS que estende o `InputDate` do Nuxt UI: aceita todas as props dele mais `datepicker`, `range`, `disabledWeekdays` e `disabledWeekends`. Emite `update:modelValue`, `update:placeholder`, `change`, `blur` e `focus`. Ficha técnica em [eletro.design/components/inputdate](https://eletro.design/components/inputdate); a base, em [ui.nuxt.com/docs/components/input-date](https://ui.nuxt.com/docs/components/input-date). A variante múltipla é o **`MeInputDateMultiple`** ([eletro.design/components/inputdatemultiple](https://eletro.design/components/inputdatemultiple)). ## Acessibilidade Navegação por teclado no calendário (setas + `Enter`); o campo aceita digitação além do clique. O formato esperado (`dd/mm/aaaa`) deve estar na ajuda do FormField, não só implícito. O estado `disabled` precisa ser percebido além da cor. --- ## Filter Bar _A barra persistente de filtros da index — visões salvas, critérios ativos e ações. Sempre visível, nunca overlay; abre o Filter Search para compor critérios._ A Filter Bar é a faixa **persistente** entre a toolbar e a listagem. **Nunca abre overlay — é sempre visível** e reflete em tempo real os critérios ativos. Tem CRUD inline sobre os critérios: clicar num critério edita-o direto na barra; o Filter Search só **adiciona** novos. O **comportamento** de filtrar (criar, editar, aplicar, salvar) vive no padrão Filtrar; aqui está como a barra se monta e se adapta. ## Anatomia Lê-se da esquerda para a direita, sobre o mesmo fundo da toolbar e separada da tabela por uma borda inferior. Só a área de critérios rola horizontalmente quando excede a largura. | Zona | O que contém | |------|--------------| | **LeadingSlot** | Visões salvas — recortes prontos da listagem (ex.: "Todos os processos", "Todo período") como dropdowns de contexto; **não** criam critérios. | | **CriterionArea** | Os critérios ativos, um CriterionInput por filtro (campo · operador · valor). Scroll horizontal quando excede a largura. | | **ActionButtonsArea** | As ações da barra — **+** (abre o Filter Search) · **Salvar** a combinação atual · **Limpar** — montadas com a ButtonBar. | ## Relação com o Filter Search A barra **mostra e edita**; o Filter Search **compõe**. São peças distintas que trabalham juntas: - O **+** (ou a busca) abre o Filter Search — o overlay com base no CommandPalette — para **adicionar** um critério. - Cada critério confirmado no Filter Search vira um CriterionInput na CriterionArea. - **Editar** um critério existente é **inline** na barra: clicar num segmento (campo, operador ou valor) abre a edição ali mesmo — **sem** reabrir o Filter Search. ## Responsividade A barra é **persistente em qualquer largura** — não vira overlay (quem abre é o Filter Search). A régua geral está em Foundations › Breakpoints; o que é próprio da barra: | Largura | Comportamento | |---------|---------------| | **Desktop** · ≥ 1024px | Tudo inline: visões salvas no início, critérios como chips editáveis e as ações à direita. | | **Tablet** · 640–1024px | Inline; os critérios excedentes recolhem num **+N** que abre o restante em popover. | | **Mobile** · < 640px | A barra **continua visível**; a CriterionArea ganha scroll horizontal e o **+** abre o Filter Search como bottom-sheet. A barra em si não colapsa em modal. | ## No código Enquanto não há um `` internalizado, a barra é uma faixa persistente que compõe CriterionInput (um por critério) e ButtonBar (ações) sobre o layout da toolbar, e dispara o Filter Search para compor/editar critérios. ## Acessibilidade A barra deve manter cada critério como alvo editável com rótulo acessível e anunciar mudanças nos critérios ativos (`aria-live`) já que a listagem atualiza em tempo real. Como é sempre visível, não há foco a gerenciar na própria barra — o foco gerenciado pertence ao Filter Search quando abre. ## Onde se aplica --- ## Filter Search _O overlay de busca e composição de filtros (base CommandPalette) — busca direta, filtros salvos e construção de critério em 3 passos._ O Filter Search é o **overlay** que abre a partir da Filter Bar (pelo **+** ou pela busca) para **adicionar** critérios — editar um critério já aplicado acontece inline na barra, sem este overlay. Unifica três intenções num só campo: 1. **Busca direta** — encontrar um registro em qualquer lista digitando o termo. 2. **Filtros salvos** — aplicar uma combinação pronta num clique. 3. **Construir um critério** — em três passos: **Critério → Operador → Valor**. ## Anatomia | Zona | O que contém | |------|--------------| | **Campo de busca** | "Busca direta ou encontre um filtro", com `Enter` para confirmar e **×** para fechar. Ícone de busca à esquerda. | | **Filtros salvos** | Chips de combinações prontas (ex.: "Pré-Pedido", "Meus processos", "Em 22/03/2026") logo abaixo do campo. | | **Lista de Critério** | Os campos disponíveis (ex.: Aprovado por, Categoria, Criado por), cada um com chevron que faz o drill-down para operador e valor. | ## Base CommandPalette A árvore `groups → items → children` modela os três passos do critério, e a busca fuzzy (Fuse.js) acha campo ou registro por texto sem rolar a lista inteira. | Recurso do CommandPalette | Papel no Filter Search | |---------------------------|------------------------| | Busca fuzzy (`fuse`) + `icon` de busca | Busca direta de registro **e** localização do campo por nome. | | `groups` / `items` | Os **campos** disponíveis (grupo "Critério") e os filtros salvos. | | `children` + botão `back` | Drill-down **Critério → Operador → Valor**; voltar um passo sem fechar. | | `multiple` | Valores múltiplos num mesmo critério (ex.: Status em N estados). | | `loading` | Opções de valor assíncronas (lista que vem da API). | | `close` | Fecha o overlay (**×** ou `Esc`). | ## Responsividade Por ser overlay, ancora-se no contexto e segue a régua de Foundations › Breakpoints: | Largura | Comportamento | |---------|---------------| | **Desktop** · ≥ 1024px | Overlay ancorado abaixo da barra (popover/modal centrado), largura contida. | | **Tablet** · 640–1024px | Igual ao desktop, largura adaptada. | | **Mobile** · < 640px | Abre como **bottom-sheet** ocupando a largura da tela; aplicar fecha a folha e devolve ao contexto. | ## No código Parte do `` do Nuxt UI; a ficha técnica (props/slots/emits) está em [ui.nuxt.com/docs/components/command-palette](https://ui.nuxt.com/docs/components/command-palette). A Filter Bar dispara o overlay e recebe de volta o critério composto. ## Acessibilidade Como overlay, precisa de **foco gerenciado**: ao abrir, o foco vai para o campo de busca; ao fechar (× ou `Esc`), volta ao gatilho na barra. O drill-down precisa do botão **voltar** (`back`) audível e navegação por teclado (setas + `Enter`). Anuncie o passo atual (Critério/Operador/Valor) para leitores de tela. ## Onde se aplica --- ## LoginForm _O formulário de login completo do ME — e-mail/senha, idioma, lembrar, reCAPTCHA e links de rodapé._ O LoginForm é a tela de entrada do produto, pronta: campos de e-mail e senha com validação, seletor de idioma opcional, "lembrar-me" + "esqueci a senha" na mesma linha, um espaço para o reCAPTCHA e o rodapé com cadastro/ajuda. Combina com o block [Login](https://eletro.design/blocks/login) (layout dividido imagem + formulário). ## Quando usar - Na **tela de autenticação** — não monte campos de login soltos em outra estrutura. - Quando o acesso é multilíngue, ligue o seletor de idioma (ver i18n abaixo). ## Configuração | Prop | Papel | |------|-------| | `title` · `description` | Cabeçalho do formulário (ou use os slots de mesmo nome). | | `show-locale-select` · `locales` · `locale-placeholder` | Seletor de idioma (oculto por padrão; popule `locales`). | | `remember-me-label` | Rótulo do "lembrar-me". | | `forgot-password-label` · `forgot-password-href` | Link de recuperação de senha. | | `sign-up-href` · `help-href` | Links do rodapé (cadastro · ajuda). | | `show-recaptcha-placeholder` | Mostra o placeholder quando não há reCAPTCHA via slot. | | `loading` | Desabilita o formulário e indica carregamento no botão. | Slots: `title`, `description`, `recaptcha` (injeta o widget real), `footer`, `signup-text`, `help-text`. Eventos: `submit` (`{ email, password, rememberMe? }`), `forgotPassword`, `signUp`, `help`. ## Idioma e i18n O seletor de idioma alimenta a estratégia multilíngue do ME — ver Voz e conteúdo › Idioma e i18n. Os rótulos são chaves de i18n, não strings cravadas. ## No código `MeLoginForm` (componente EletroDS) — API e preview ao vivo em [eletro.design/components/loginform](https://eletro.design/components/loginform). ## Acessibilidade - Cada campo tem **rótulo associado** e erro por validação inline; o foco vai para o primeiro campo inválido no `submit`. - O reCAPTCHA recebe **nome acessível**; o estado `loading` é anunciado no botão. - Contraste e foco visível seguem Foundations › Acessibilidade. --- ## SelectMultiple _Seleção múltipla com busca e autocomplete — escolher vários itens de uma lista, como tags._ O SelectMultiple deixa o usuário escolher **vários itens** de uma lista, com busca e autocomplete; os selecionados viram tags no campo. Use quando a escolha é múltipla e a lista é média/grande (com filtragem por digitação). ## Quando usar - **Vários valores** de um conjunto — ex.: categorias de um fornecedor, responsáveis de uma cotação. - Para **uma** escolha, use o Select. Para **mover/ordenar** itens entre duas listas (ex.: editar colunas), use o DualList. Para **digitar** valores livres como tags, o InputMultiple. ## Configuração | Prop | Papel | |------|-------| | `v-model` (`modelValue`) | Itens selecionados. | | `items` | Opções disponíveis (`InputMenuItem[]`). | | `placeholder` | Texto do campo vazio. | | `disabled` · `loading` · `loading-icon` | Desabilitado / carregando (com ícone opcional). | | `color` · `variant` · `size` | Aparência (variante padrão `outline`, tamanho `md`). | | `highlight` | Realça como foco (ex.: indicar erro/atenção). | | `open-on-click` · `open-on-focus` | Quando abrir o dropdown. | | `counter` | Mantém o campo em **uma linha só**: as tags que não cabem colapsam num **badge de contagem** clicável, que abre um popover listando as demais. (Sem `counter`, as tags quebram livremente em várias linhas.) | | `tag-max-width-class` | Largura máxima de cada tag (padrão `max-w-[30%]`) — passe uma classe `max-w-*`. | **Tags:** cada tag **trunca** quando o rótulo passa da largura máxima e mostra o texto completo em **tooltip** no hover — mantém rótulos longos legíveis sem quebrar o layout. Eventos: `update:modelValue`, `change`, `focus`, `blur`. ## No código `MeSelectMultiple` (componente EletroDS) — API e preview ao vivo em [eletro.design/components/selectmultiple](https://eletro.design/components/selectmultiple). ## Acessibilidade - O campo tem **rótulo** (FormField); a lista é navegável por teclado (setas, Enter, Esc). - Cada item selecionado (tag) é **removível por teclado** e a contagem/seleção é anunciada. - `loading` e estado vazio têm texto, não só ícone. --- ## DualList _O transfer-list do ME (inativas ↔ ativas) — peça por trás do "Editar colunas" da index e de escolher itens entre duas listas._ O DualList move itens entre duas colunas — disponíveis (esquerda) e selecionados (direita). É a peça por trás do Editar colunas da index (colunas inativas ↔ ativas) e de qualquer cenário "escolher alguns itens de um catálogo". O *comportamento* de configurar colunas vive em Estrutura de Index; aqui está a ficha do componente. ## Uso em tela Aparece dentro de um modal (ex.: "Editar colunas") ou embutido num formulário. Lê-se da esquerda pra direita: à esquerda o que está fora, à direita o que está ativo, com setas no meio reforçando a transferência. Cada lado tem busca própria; move-se item a item (ícone + / ×) ou em massa (Selecionar todas / Remover todas). Para poucas opções (2–3, binárias), um grupo de checkboxes resolve melhor. O DualList ganha quando a lista é grande, a busca ajuda a achar, e o usuário precisa revisar de relance o que ficou ativo — nunca empilhe checkboxes soltos para isso. ## Aplicação O mesmo componente reaparece sempre que se monta um subconjunto a partir de um catálogo — reconhecê-lo evita reinventar a interação: | Onde | O que se move | |------|---------------| | **Editar colunas** da index | colunas disponíveis → exibidas (e a ordem das exibidas, arrastando) | | **Convidar / enviar follow-up** | contatos disponíveis → destinatários | | **Permissões de um perfil** | permissões disponíveis → atribuídas | | **Cotação / catálogo** | fornecedores ou categorias → selecionados | A mecânica é idêntica nos quatro; muda só o rótulo dos lados (`left-box-label` / `right-box-label`) e o catálogo de itens. ## Variantes Escolha pelo cenário: | Quero… | Use | |--------|-----| | Reordenar os selecionados arrastando | `draggable` *(handle nos dois lados; a reordenação pausa enquanto há busca ativa)* | | Rotular cada lado | `left-box-label` / `right-box-label` | | Descrição ou ajuda por lado | `left-box-description` · `right-box-help` (e os pares à direita) | | Mensagem de lista vazia | `left-box-empty-text` / `right-box-empty-text` | | Itens que são objetos (não texto) | `value-key` (id estável) + `value-label` (texto exibido) | | Conteúdo extra por item selecionado | slots `input`, `icons-left`, `icons-right` | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Move item a item (+ / ×) ou em massa (Selecionar/Remover todas). | | `required` | Marca os dois lados como obrigatórios no formulário. | | `disabled` | Desativa as duas colunas e as ações em massa; as ações por item também ficam inertes. | | Vazio | Mostra o texto de vazio do lado (ex.: "Não encontramos nada aqui"). | | Erro por lado | `left-error` / `right-error` exibem a mensagem (ex.: "selecione ao menos uma coluna"). | | Busca ativa | Filtra aquele lado; mover entre listas continua, mas reordenar (draggable) pausa. | ## No código `` é um componente EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: [eletro.design/components/duallist](https://eletro.design/components/duallist). Aqui o foco é o uso em Design. ## Acessibilidade Cada lista é uma região de formulário: rotule os dois lados (`left-box-label` / `right-box-label`). As ações por item (+ / ×) e as de massa precisam de rótulo acessível, não só ícone. O estado `disabled` deve ser percebido além da cor (opacidade + `aria-disabled`). Garanta mover por teclado, não só arrastando — `draggable` é um reforço, não o único caminho. ## Onde se aplica --- ## Checkbox _Caixa de seleção (Nuxt UI) — seleção de linha na index e múltipla escolha em formulários._ O Checkbox é a caixa marcada/desmarcada. Na index, é a coluna de seleção de linha; em formulários, a escolha múltipla. ## Uso em tela Na index, o checkbox do cabeçalho seleciona/limpa a página inteira e usa o estado `indeterminate` quando só parte está selecionada — a seleção é o que dispara as Ações em massa. Em formulário, use `UCheckboxGroup` para listas curtas. Para escolher itens entre duas listas (ex.: editar colunas), use o DualList — não uma pilha de checkboxes. ## Estados | Estado | Comportamento | |--------|---------------| | Marcado / desmarcado | Seleção binária; o rótulo ao lado é sempre clicável junto da caixa. | | Indeterminado | Cabeçalho da tabela quando só parte da página está selecionada (`aria-checked="mixed"`) — sinal além do visual. | | Desabilitado | Inerte quando a opção não se aplica ao contexto; percebido além da cor. | ## No código `UCheckbox` — doc técnica em [ui.nuxt.com/docs/components/checkbox](https://ui.nuxt.com/docs/components/checkbox). ## Acessibilidade - Use o checkbox nativo (`role`/`checked`) — não recrie com `div`; rótulo **associado** e clicável. - Estado **indeterminate** anunciado (`aria-checked="mixed"`), não só visual. - **Foco visível** e acionável por teclado (`Espaço`); alvo de toque ≥ 44px mesmo em densidade de tabela. - Em seleção de linha (index), a marcação/contagem deve ser anunciada (`aria-live`). --- ## FormField _O esqueleto de todo campo — rótulo, obrigatório, texto de ajuda e erro. Tudo que é input vive dentro dele._ O FormField é a moldura de qualquer campo de formulário: rótulo, marca de obrigatório, texto de ajuda e mensagem de erro. Não é o input em si — é o que dá contexto e acessibilidade a ele. Todo campo do ME (Input, Select, Textarea…) vive dentro de um FormField. ## Variantes | Quero… | Use | |--------|-----| | Marcar como obrigatório | `required` (mostra `*` no rótulo) | | Texto de ajuda sob o campo | `hint` / `description` | | Mensagem de erro | `error` (string) — pinta a borda e anuncia | | Ajustar densidade | `size` (`sm` em formulários densos) | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Rótulo + controle + ajuda opcional. | | `required` | `*` no rótulo; validação exige preenchimento. | | Erro | **Ícone + mensagem + borda** de erro (nunca só a cor); substitui a ajuda enquanto ativa. | | `disabled` | Campo inteiro inerte (rótulo esmaecido). | ## No código `UFormField` — doc técnica em [ui.nuxt.com/docs/components/form-field](https://ui.nuxt.com/docs/components/form-field). ## Acessibilidade O rótulo é associado ao controle (`for`/`id`) — clicar nele foca o campo. O erro é reforçado por **ícone + texto** (não só cor) e anunciado (`aria-describedby` + `aria-invalid`). "Obrigatório" precisa de reforço além do `*` (ex.: `aria-required`). Ao submeter com erro, **foque e anuncie o primeiro campo inválido**. ## Onde se aplica --- ## Input _Campo de texto canônico do ME — estende o UInput com máscara (telefone, CNPJ, data)._ O Input é o campo de texto do ME. O diferencial sobre o `UInput` puro é a máscara: telefone, CNPJ, CEP, data — o valor é formatado enquanto se digita. Vive sempre dentro de um FormField, que dá rótulo, ajuda e erro. ## Variantes | Quero… | Use | |--------|-----| | Formatar enquanto digita | `mask` (ex.: telefone, CNPJ, data) — o diferencial do ME | | Ícone à esquerda/direita | `icon` / `trailing` (ex.: busca, limpar) | | Valor numérico com stepper | número (− / +) para quantidade/valor | | Ajustar densidade | `size` (`sm` em formulários densos) | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Vazio com placeholder, ou preenchido. | | Focus | Anel de foco visível. | | `disabled` | Inerte, esmaecido. | | Erro | Borda de erro + mensagem (via FormField). | ## No código `` é um componente EletroDS. Doc técnica em [eletro.design/components/input](https://eletro.design/components/input). Aqui o foco é o uso em Design. ## Acessibilidade O rótulo vem do FormField — placeholder não substitui rótulo. Máscara não pode impedir colar/editar; o formato esperado deve estar na ajuda, não só implícito na máscara. ## Onde se aplica --- ## Select _Seleção em lista — USelect para listas curtas, USelectMenu para busca e múltipla escolha._ O Select escolhe um valor (ou vários) de uma lista. Use USelect para listas curtas e fixas; USelectMenu quando precisar de busca, criação de item ou seleção múltipla. Vive dentro de um FormField. ## Variantes | Quero… | Use | |--------|-----| | Lista curta e fixa | `USelect` | | Busca, criar item ou múltipla seleção | `USelectMenu` | | Muitos itens para mover entre listas | use o DualList, não um select | | Ajustar densidade | `size` | ## Estados | Estado | Comportamento | |--------|---------------| | Default | Placeholder "Selecione". | | Aberto | Lista de opções; opção ativa destacada. | | `disabled` | Inerte, esmaecido. | | Erro | Borda de erro + mensagem (via FormField). | ## No código `USelect` / `USelectMenu` — doc técnica em [ui.nuxt.com/docs/components/select-menu](https://ui.nuxt.com/docs/components/select-menu). ## Acessibilidade Navegação por teclado (setas + Enter), opção ativa anunciada. Em múltipla seleção, o número de selecionados precisa ser percebido além da cor. ## Onde se aplica --- ## Textarea _Texto longo — observações, justificativas. Vive dentro de um FormField._ O Textarea é o campo de texto longo (observações, justificativa de aprovação, descrição). Para uma linha, use o Input. Vive dentro de um FormField. ## Variantes | Quero… | Use | |--------|-----| | Crescer conforme o texto | `autoresize` | | Altura inicial fixa | `rows` | | Densidade | `size` | ## No código `UTextarea` — doc técnica em [ui.nuxt.com/docs/components/textarea](https://ui.nuxt.com/docs/components/textarea). ## Acessibilidade - Rótulo **associado** via FormField — **placeholder não é rótulo**. - Se houver contador/`maxlength`, anuncie o limite e o restante (`aria-describedby`), não só visualmente. - **Foco visível**; redimensionamento permitido (não trave `resize` sem necessidade). - Erro com ícone + texto + borda (não só cor) e ligado por `aria-describedby`. --- ## Radio _Escolha única entre poucas opções visíveis. Para muitas, use Select._ O Radio é a escolha única entre opções todas visíveis — bom para 2–5 alternativas que valem a pena mostrar de uma vez (ex.: tipo de frete). Acima disso, a lista fica longa: use o Select. Vive dentro de um FormField. ## Variantes | Quero… | Use | |--------|-----| | Empilhar vertical | `orientation="vertical"` (padrão) | | Em linha | `orientation="horizontal"` | | Densidade | `size` | ## No código `URadioGroup` — doc técnica em [ui.nuxt.com/docs/components/radio-group](https://ui.nuxt.com/docs/components/radio-group). ## Acessibilidade - Agrupe as opções com **`fieldset` + `legend`** (ou `role="radiogroup"` com rótulo) — o grupo tem um nome único. - **Teclado:** setas navegam e selecionam entre as opções; `Tab` entra/sai do grupo. - Rótulo de cada opção associado e clicável; **foco visível**; alvo ≥ 44px. - Estado selecionado percebido além da cor. --- ## Switch _Liga/desliga uma configuração com efeito imediato — sem precisar salvar._ O Switch alterna uma configuração com efeito imediato (notificações, visibilidade) — não espera um "Salvar". Quando a escolha booleana só vale no submit de um formulário, use o Checkbox. ## Variantes | Quero… | Use | |--------|-----| | Densidade | `size` | | Bloquear | `disabled` | | Estado de carregamento | `loading` (enquanto persiste a mudança) | ## No código `USwitch` — doc técnica em [ui.nuxt.com/docs/components/switch](https://ui.nuxt.com/docs/components/switch). ## Acessibilidade - Semântica de **`role="switch"` + `aria-checked`**; rótulo associado que diz o que liga/desliga. - Estado on/off percebido **além da cor** (posição do thumb + rótulo). - **Foco visível**; acionável por `Espaço`/`Enter`; alvo ≥ 44px. - Como o efeito é imediato, em falha de persistência **reverta o estado** e anuncie o erro (não deixe o switch mentindo). --- ## NavBar _Barra de navegação inferior em telas menores — atalhos para as áreas principais._ Barra de navegação fixada no rodapé em telas menores (`MeNavBar`), com atalhos para as áreas principais do produto. É o equivalente mobile do Layout: no desktop a navegação principal fica **horizontal na app bar azul do topo** (Header); em telas estreitas, desce para o rodapé, ao alcance do polegar. ## Quando usar - Em telas estreitas, para dar acesso de um toque às áreas principais (Dashboard, Transações, Fornecedores, Catálogos). - No máximo **quatro itens** visíveis — acima disso, o excedente vai pro mapa do site (mais itens competindo viram ruído e erram o alvo no toque). ## Itens de navegação Até **quatro atalhos** para as áreas principais. O item ativo é destacado **automaticamente** pela rota atual — o usuário sempre sabe onde está sem reler os rótulos. Cada item é ícone + rótulo de texto + destino. ## Mapa do site Para ir além dos quatro atalhos, o NavBar abre o **mapa do site** — a mesma árvore de áreas e seções do Header, agrupando cada área e seus filhos. Mantém o acesso completo sem lotar a barra. ## Cor Segue o contrato de marca do Header: sem cor definida, usa o primário com texto invertido. No ME, use a cor da marca via tokens — nunca HEX cru. ## Onde se aplica ## No código Componente EletroDS (`MeNavBar`) — API, props e preview ao vivo no doc técnico: [eletro.design/components/navbar](https://eletro.design/components/navbar). Aqui o foco é o uso em Design. ## Acessibilidade - É um **landmark de navegação** (`