Switch

<link rel="stylesheet" href="css/nash-switch.css" />   ← depois de nash-componentes.css

// a forma nativa, a que o app e o site escrevem:
<label class="nash-switch" for="som"><input type="checkbox" id="som" /><span class="nash-switch-track"><i class="nash-switch-thumb"></i></span><span>Som do site</span></label>

// a forma curta — o JS completa o checkbox, o trilho e o rótulo:
<label class="nash-switch">Auto-chat</label>

// sem formulário:
<button class="nash-switch" role="switch" aria-checked="false">Câmera lenta</button>
<script src="js/nash-switch.js"></script>

const som = NashSwitch.mount('#som', {         // o id do checkbox ou da casca
  checked: 'mixed',                          // true · false · 'mixed' (Automatic)
  label: 'Som do site',                      // ou o texto que a página escreveu
  onChange(checked, s) {}                    // true · false · 'mixed'
})
som.setChecked(true)                          // checked + indeterminate no checkbox; aria-checked no botão
som.isChecked()                               // true · false · 'mixed'
som.el.addEventListener('nash:change', (e) => e.detail)   // { checked }

// variante congelada, pra documentação — não responde ao ponteiro:
<button class="nash-switch" role="switch" aria-checked="true" data-state="hover">Ligado</button>

// no interruptor:  aria-checked="true|false|mixed" (botão) · checked · indeterminate · disabled (checkbox) · data-mode="chat|voz|design|imagem|social"
// tokens:    --nash-switch-accent  · --nash-switch-travel (24)  · --nash-switch-track-width / -track-height / -thumb-size (densidade de tela)  · --nash-switch-time-scale
// na família:  --nash-escala: 4  (câmera lenta)  · [data-motion="reduced"]

• O nome é do mapa de vocabulário.Toggle Switch, State e knob são anteriores à convenção e dão a base, não o identificador; Toggle está na lista de nomes vetados do mapa. A peça é .nash-switch; partes nash-switch-track e nash-switch-thumb (do mapa), halo, spotlight e label (das irmãs); variante data-mode; estado por ARIA; token --nash-switch-*, com --nash-switch-travel no lugar do --nash-curso; o que o JS escreve em --nash-runtime-*; evento nash:change; método camelCase, verbo primeiro.
• Os três estados são aria-checked.Off, On e Automatic viram false, true e mixed: a única resposta da ARIA ao terceiro estado. O Automatic é o que o Figma desenha — o thumb esticado pelo trilho inteiro, ocupando os dois lados de uma vez — e ganha o laço que diz "decidindo sozinho".
• Duas formas, um seletor.A casca é o label com o checkbox nativo dentro (a forma que todo consumidor já escrevia: o navegador cuida do clique, do teclado, do formulário e anuncia o mixed do indeterminate) ou o button role="switch" (sem campo de formulário). O CSS lê as duas no mesmo seletor, com :has(), em vez de o JS espelhar o estado num atributo: a ARIA in HTML proíbe aria-checked num checkbox nativo, e sem JS a forma nativa continua inteira. A ARIA 1.2 diz que em role="switch" o mixed lê como false: quando o terceiro estado existe, a forma nativa é a que o anuncia certo.
• A placa de repouso é a da família.O Figma desenha o Off com #1F2128 40%, que é a placa de hover das irmãs. A receita de vidro é a mesma byte a byte: repouso, hover e apertado nos três tokens do kit; ligado e Automatic tingem a apertada com o filete de accent que o Figma anota (12% e 26%).
• A luz vai embora comida de dentro pra fora.A aura é a técnica do Button: uma sombra do accent num elemento que segue a pílula, com as duas bordas registradas (--nash-switch-halo-inner/-outer); ligar move a de fora, desligar move a de dentro, em 600ms. A respiração é um número registrado (--nash-switch-breath) numa animação que já existe em repouso, parada: desligar pausa em vez de remover, e o brilho e a aura não saltam de volta a zero.
• A pressão alonga o thumb.O Figma não desenha Pressed. Num interruptor a pressão é o thumb esticando 15% na direção do gesto (a largura, ancorada no lado em que ele está), 100ms, solta em 160, com a placa apertada da família. Não fica: o que fica é o estado.
• 44 de alto, o trilho no meio.A descrição do componente pede uma área de toque de 44 × 44 além do trilho de 24. A casca tem min-height de 44 (--nash-alvo-solto); o trilho, o rótulo e o checkbox ficam dentro dela.
• O deslize virou a peça.O efeito .nash-deslize do kit só tinha este componente como consumidor; efeito de um componente só não é camada (regra 9 do mapa). A viagem do thumb mora aqui, com o Accent Glow do Figma no lugar do halo de 10px do kit; o --nash-curso saiu dos tokens e é --nash-switch-travel.
• Estados que o Figma não desenhou.Hover, pressão, foco pelo teclado e desabilitado existem porque o interruptor precisa deles; ficam listados como pendentes no Figma.