Dashboard (cards + tabela)

<div class="sc-grid sc-cols-6 sc-gap-4">
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <span class="sc-badge sc-badge-secondary">Receita</span>
                  <h3 style="margin: 12px 0 0;">R$ 12.450</h3>
                  <p class="doc-muted" style="margin: 8px 0 0;">+18% vs semana</p>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <span class="sc-badge sc-badge-secondary">Pedidos</span>
                  <h3 style="margin: 12px 0 0;">312</h3>
                  <p class="doc-muted" style="margin: 8px 0 0;">Taxa 3.2%</p>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <span class="sc-badge sc-badge-secondary">Tickets</span>
                  <h3 style="margin: 12px 0 0;">9</h3>
                  <p class="doc-muted" style="margin: 8px 0 0;">2 críticos</p>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-4">
                  <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                    <strong>Atividade</strong>
                    <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Ver tudo</button>
                  </div>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <div class="sc-table-container">
                    <table class="sc-table sc-table-compact">
                      <thead><tr><th>Evento</th><th class="is-muted">Hora</th><th>Status</th></tr></thead>
                      <tbody>
                        <tr><td>Login</td><td class="is-muted">09:12</td><td><span class="sc-badge sc-badge-success">OK</span></td></tr>
                        <tr><td>Upload</td><td class="is-muted">09:20</td><td><span class="sc-badge sc-badge-warning">Pendente</span></td></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <strong>Atalhos</strong>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <div style="display:grid; gap:10px;">
                    <button class="sc-btn sc-btn-primary" type="button">Novo</button>
                    <button class="sc-btn sc-btn-glass" type="button">Importar</button>
                    <button class="sc-btn sc-btn-outline" type="button">Config</button>
                  </div>
                </div>
              </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.