Uma ação principal por contexto. A secundária oferece uma alternativa; a textual apoia a leitura.
“Simular processamento” percorre os estados pronto, processando e concluído, sem envio. Alt + R aciona “Revisar exemplo” fora dos campos de texto.
“Indisponível” representa uma ação sem permissão neste exemplo. Estado de processamento mantém o nome da ação. Desabilitar só quando a ação estiver indisponível; explique a causa junto ao controle.
<a class="xq-btn" href="mailto:contato@chesslab.com.br">Conversar com a Chesslab</a>
<button class="xq-btn xq-btn--secundario" type="button">Revisar</button>As dúvidas da aceleração usam abas. Setas navegam entre os temas; Home e End acessam os extremos.
E-commerces e atacadistas que já vendem e querem escalar com processo, não com achismo.
Anúncios, criativos, CRO, fidelização, feedback semanal, relatório mensal e calendário visível.
Você preenche a aplicação, fazemos o diagnóstico e desenhamos meta e plano do mês 01.
O foco entra no menu. Setas, Home e End percorrem as ações. Escape fecha e devolve o foco ao botão; Tab continua a página.
<div data-xq-abas>
<div role="tablist" aria-label="Dúvidas">
<button role="tab" id="pergunta" aria-controls="resposta"
aria-selected="true">Para quem é?</button>
</div>
<div role="tabpanel" id="resposta" aria-labelledby="pergunta">…</div>
</div>O acordeão usa details e summary nativos. Funciona por teclado e sem JavaScript.
Ponto de corte por custo fixo e variável. Teto de CAC por margem, sem queimar lucro.
Cronograma automatizado mostra todo dia o que otimizar em cada campanha.
Você vê o que fazemos por você em cada dia do mês. Sem ruído, sem atraso escondido.
Rótulos sempre visíveis. Instrução antes do erro. Esta demonstração valida localmente, sem envio ou armazenamento.
Setas percorrem a lista; Enter seleciona; Escape fecha.
<label for="email">E-mail profissional</label>
<input class="xq-input" id="email" type="email" required
aria-describedby="email-erro" data-xq-error="email-erro">
<p class="xq-campo-erro" id="email-erro"></p>Dialog nativo para decisões que pedem atenção. Gaveta para consultar o escopo sem perder o contexto.
Tab e Shift + Tab ficam dentro da janela. Escape fecha. Ao sair, o foco volta à ação que abriu a sobreposição.
<button data-xq-open="aplicacao">Abrir aplicação</button>
<dialog class="xq-dialog" id="aplicacao" data-xq-dialog
aria-labelledby="titulo-aplicacao">
<h2 id="titulo-aplicacao">Preencher aplicação</h2>
<button data-xq-close>Voltar</button>
</dialog>A cor reforça o significado. O texto descreve a situação e indica o que fazer.
Campos validadosA demonstração está pronta para revisão.
Revise o e-mailUse um endereço completo, como nome@empresa.com.br.
Falta um campo obrigatórioPreencha o nome para continuar.
Validação localNenhum dado desta demonstração é enviado ou armazenado.
Cada acionamento cria uma mensagem independente. A pilha mantém até quatro notificações, sem roubar o foco. Estas mensagens permanecem até o fechamento.
Exemplo pronto para revisão.
Quiz técnico baseado no ciclo real de trabalho da Chesslab. Feedback explica a resposta e permite tentar novamente.
| Componente | Contrato | Comportamento |
|---|---|---|
| Abas | data-xq-abas | Uma seleção, roving tabindex, painéis ligados por ARIA. |
| Menu | data-xq-menu | Setas, Home, End, Escape e fechamento externo. |
| Dialog | data-xq-dialog | Foco confinado, Escape, retorno ao acionador. |
| Combobox | data-xq-combobox | Busca sem acentos, seleção por teclado ou toque. |
| Formulário | data-xq-form | Validação local, erro ligado ao campo, foco no primeiro erro. |
| Toasts | XequeCore.toast(mensagem, opções) | Pilha de quatro mensagens; duração opcional pausa ao receber foco ou ponteiro. |
| Ação | data-xq-action | Estado explícito e atalho opcional sem interferir na digitação. |
| Quiz | data-xq-quiz | Resposta explicada, anúncio discreto, tentativa sem bloqueio. |
CSS: css/20-core.css. Comportamentos: js/modulos/core.js, incluído uma vez. Sem JavaScript, o conteúdo das abas continua legível; acordeões e campos nativos continuam disponíveis.