Inline

<div class="sc-card sc-card-outline">
                    <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
                      <input class="sc-input" style="margin-bottom: 0; width: min(260px, 100%);" placeholder="Buscar⬦" aria-label="Buscar">
                      <div class="sc-select-menu" style="width: min(200px, 100%); margin:0;" data-value="all">
                        <button class="sc-select-trigger" type="button" aria-label="Filtro">
                          <span class="sc-select-value">Filtro</span>
                          <span class="sc-select-caret" aria-hidden="true"></span>
                        </button>
                        <div class="sc-select-popover" role="listbox" tabindex="-1">
                          <div class="sc-select-option" role="option" tabindex="0" data-value="all" data-label="Todos">Todos</div>
                          <div class="sc-select-option" role="option" tabindex="0" data-value="active" data-label="Ativos">Ativos</div>
                          <div class="sc-select-option" role="option" tabindex="0" data-value="arch" data-label="Arquivados">Arquivados</div>
                        </div>
                      </div>
                      <button class="sc-btn sc-btn-primary" type="button">Filtrar</button>
                    </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.