Pills (bem diferente do accordion)

Link permanente para esta variação, com prévia, código e requisitos completos.

CONTAINER · stable

Pills (bem diferente do accordion), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

HTML e exemplo

<div class="sc-disclosure sc-disclosure--pills" data-disclosure="single">
                        <details class="sc-disclosure-item" open="">
                          <summary class="sc-disclosure-summary">
                            <i class="sc-icon sc-disclosure-icon" data-smart-icon="sparkles"></i>
                            <span class="sc-disclosure-title">Diferente no visual</span>
                            <i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
                          </summary>
                          <div class="sc-disclosure-panel"><div class="sc-disclosure-content">
                            <p>Formato pill + transição suave.</p>
                          </div></div>
                        </details>
                        <details class="sc-disclosure-item">
                          <summary class="sc-disclosure-summary">
                            <i class="sc-icon sc-disclosure-icon" data-smart-icon="palette"></i>
                            <span class="sc-disclosure-title">Bom para filtros</span>
                            <i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
                          </summary>
                          <div class="sc-disclosure-panel"><div class="sc-disclosure-content">
                            <p>Um “mini painel” discreto por item.</p>
                          </div></div>
                        </details>
                      </div>

Classes, JavaScript e API

sc-disclosuresc-disclosure--pillssc-disclosure-itemsc-disclosure-summarysc-iconsc-disclosure-iconsc-disclosure-titlesc-disclosure-togglesc-disclosure-panelsc-disclosure-content

Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: disclosures
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

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.