States

Hover, pressed, selected và disabled biểu đạt bằng màu — nền, viền, chữ. Không control nào đổi chiều cao, chiều rộng, vị trí hay scale để báo trạng thái. Ô nhập chữ là ngoại lệ duy nhất không có pressed: gõ không phải nhấn.

Ở chiều cao mặc định 36px sau DS-017 clause 3, một phép thu 2% dịch 0,7 pixel — dưới ngưỡng đọc được thành phản hồi, nhưng đủ để trình duyệt lấy mẫu lại chữ trong nhãn và làm nó rung. Đó là nhiễu phải trả giá render mà không mua được thông tin nào.

Kiểm. node infra/check-control-states.mjs — chuỗi press-scale không được xuất hiện trong packages/ui/src/**.

Mỗi primitive tương tác có hover, pressed và focus-visible; cộng selected nếu nó có trạng thái chọn, và disabled nếu nó vô hiệu hoá được. Trước DS-018, checkbox, radio và switch không có hover — cách duy nhất biết con trỏ đang ở trên một checkbox là con trỏ chuột đổi hình. Sáu ô dưới đây là năm trạng thái trên primitive thật, cạnh nhau — không phải mô tả, không phải ảnh chụp.

Ring vẽ ở :focus-visible, không ở :focus. Nó dùng --nf-component-focus-color, -width, -offset và không được tuỳ biến theo primitive.:focus-visible đã xử lý đúng sự khác biệt ở tầng trình duyệt: click vào một ô text vẫn được coi là focus-visible vì người dùng cần biết caret ở đâu, click một nút thì không. Ô nhập là chỗ duy nhất hai lớp tách nhau: :focus đổi border-color, còn :focus-visible vẽ ring.

Ring giống hệt nhau trên mọi control. Người dùng bàn phím học chỉ báo này một lần; hình học của ring — độ dày, khoảng cách — thuộc A16, trang này không lặp lại nó.

Trong menu, select và combobox, con trỏ bàn phím hiển thị bằng nền qua data-[highlighted]. Những item đó không nhận ring — ring cộng nền highlighted đọc như hai con trỏ cùng lúc trên cùng một danh sách, và nền một mình là đủ.

Never. Đừng "sửa" dropdown-menu.tsx vì nó không có focus-visible. Con số 0 ở đó là đúng, và gate của A34 miễn trừ nó có tên kèm lý do ghi trong chính mã gate — chứ không im lặng bỏ qua.

Mỗi primitive bind alias -hover và -pressed của chính nó ở tầng component, không bind thẳng token semantic. Giá trị thật của mười token dưới, đọc trực tiếp từ theme đang mở:

--nf-component-transition-duration là 120ms và chi phối chiều ra. --nf-component-transition-press-duration là 0ms và được ép lên chiều vào qua :active. Đó không phải một chi tiết cài đặt tình cờ — nó là thứ tạo cảm giác chắc tay: trạng thái nhấn xuất hiện ngay lập tức dưới ngón tay, rồi tan đi trong 120ms khi thả. Đảo chiều lại sẽ cho cảm giác control phản hồi chậm dù tổng thời gian không đổi.

prefers-reduced-motion: reduce đưa mọi thời lượng về 0ms, nên các trạng thái nhảy tức thì. Đổi màu không phải chuyển động và về nguyên tắc không cần zero hoá, nhưng kết quả vô hại và nhất quán với phần còn lại của kit.

Không phải bảng màu — giá trị của surface.hover và surface.pressed thuộc màu, trang này chỉ nói chúng dùng vào việc gì.

Không phải hình học của ring — độ dày, khoảng cách và lý do ring không dán sát viền nằm ở tiêu điểm và bàn phím.

Không phải presence — dialog vào bằng đường cong nào, menu ra trong bao lâu, thuộc chuyển động. Ranh giới: trạng thái là control đang được tương tác; presence là bề mặt đang xuất hiện hay biến mất.

Không phải validation — aria-invalid, viền lỗi và thông điệp thuộc trang của từng primitive và nội dung/ngôn ngữ.