Upload (dropzone)

<div class="sc-card sc-card-outline" style="max-width: 520px; margin-inline:auto;">
                    <div class="sc-file-drop" data-file-name=".sc-file-drop-out">
                      <label class="sc-file-drop-label" for="docFile">
                        <i class="sc-icon" data-smart-icon="upload"></i>
                        <div class="sc-file-drop-name">Arraste e solte</div>
                        <div class="sc-file-drop-hint">ou clique para selecionar um arquivo</div>
                      </label>
                      <input id="docFile" type="file">
                      <div class="sc-file-drop-file">
                        <i class="sc-icon" data-smart-icon="file"></i>
                        <span class="sc-file-drop-out">Nenhum arquivo selecionado</span>
                      </div>
                      <div style="display:flex; gap:10px; flex-wrap:wrap;">
                        <button class="sc-btn sc-btn-primary" type="button">Enviar</button>
                        <button class="sc-btn sc-btn-outline" type="button">Cancelar</button>
                      </div>
                    </div>
                  </div><div class="doc-muted" style="margin: 18px 0 10px;">Toggle / Switch (6 modelos)</div><div class="sc-card sc-card-outline">
                    <div style="display:flex; flex-direction:column; gap:12px;">
                      <label class="sc-toggle">
                        <input type="checkbox">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Padrão</span>
                      </label>

                      <label class="sc-toggle sc-toggle-sm">
                        <input type="checkbox" checked="">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Small</span>
                      </label>

                      <label class="sc-toggle sc-toggle-lg">
                        <input type="checkbox">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Large</span>
                      </label>

                      <label class="sc-toggle sc-toggle-sunmoon">
                        <input type="checkbox" checked="">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Sun/Moon</span>
                      </label>

                      <label class="sc-toggle sc-toggle-wobble">
                        <input type="checkbox">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Wobble</span>
                      </label>

                      <label class="sc-toggle sc-toggle-cyber">
                        <input type="checkbox" checked="">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Cyber/Tech</span>
                      </label>

                      <label class="sc-toggle sc-toggle-glass">
                        <input type="checkbox" disabled="">
                        <span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
                        <span class="sc-toggle-label">Disabled (Glass)</span>
                      </label>
                    </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.