# Switch
Công tắc bật/tắt cho các tuỳ chọn Cài đặt như Nhạc nền, Âm thanh, Rung.

## Khi nào dùng
- Một lựa chọn hai trạng thái có hiệu lực ngay khi gạt (không cần nút "Lưu").
- Không dùng cho lựa chọn một trong nhiều (dùng Chip / ThemePicker).

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mặc định | `tt-switch` | Công tắc đứng trong hàng bất kỳ |
| Hàng cài đặt | `tt-switch tt-switch--row` | Cả hàng là công tắc, cùng cỡ `tt-settings-row` (52px) |

## Cấu trúc
```html
<button type="button" class="tt-switch" role="switch" aria-checked="true" id="music">
  <span class="tt-switch__label">Nhạc nền</span>
  <span class="tt-switch__track"><span class="tt-switch__knob"></span></span>
  <span class="tt-switch__state" aria-hidden="true"><span class="tt-switch__state-on">Bật</span><span class="tt-switch__state-off">Tắt</span></span>
</button>
```
Chữ "Bật/Tắt" đổi bằng CSS theo `aria-checked`, không cần JS; `aria-hidden` vì screen reader đã đọc trạng thái từ `role="switch"`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Tắt | Rãnh `fill-muted`, viền `line`, núm bên trái, chữ "Tắt" |
| Bật (`aria-checked="true"`) | Rãnh `mint`, núm trượt phải kèm dấu ✓, chữ "Bật" |
| `:disabled` | opacity .4 |
| Focus | Vòng `focus-ring` 3px |

## Hành vi JS
```js
var s = TTMU['switch'](el, { onChange: function (on) {} });
s.value;      // true / false
s.set(false); // đặt từ code, không gọi onChange
```
- Gắn một lần (`data-tt-bound`); trả về `{ value, set(on), destroy() }`.
- **Quy ước `onChange`:** chỉ thao tác của người dùng mới gọi `onChange`, và chỉ khi giá trị thật sự đổi; `set()` im lặng.

## Token sử dụng
`fill-muted`, `line`, `panel`, `mint`, `ink`, `soft`, `bg`, `shadow-board`, `radius-pill`, `radius-round`, `radius-14`, `space-2/4/10/12/14`.

## Khả năng tiếp cận
- `<button role="switch" aria-checked>`; Space / Enter gạt công tắc.
- Trạng thái bật không chỉ khác màu: có dấu ✓ trên núm, chữ "Bật/Tắt" và vị trí núm.
- Vùng chạm cao ≥ 44px (hàng 52px).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Nhãn là danh từ ("Nhạc nền") | Nhãn là động từ dễ hiểu ngược ("Tắt nhạc") |
| Áp dụng ngay khi gạt | Bắt bấm thêm nút xác nhận |

## Nguồn
Bổ sung có chủ đích: game không có công tắc. Gần nhất là `.sndrow` (cặp nút âm thanh trong Cài đặt) — css/style.css. Thiết kế theo ngôn ngữ của hệ thống: viền 2px, núm có bóng phẳng `shadow-board`, lò xo `cubic-bezier(.34,1.56,.64,1)` .18s.