Toggle/Switch

[pghqdev]

What to build

A toggle/switch component distinct from a checkbox. Used for settings panels, feature flags, and on/off controls.

Where the browser supports input[type="switch"] (Chrome 128+), style the native element via appearance: base-switch and ::picker(switch). For other browsers, data-switch on a hidden checkbox with a styled label as the thumb.

Tone-respecting: data-variant on the switch maps to the tone grammar (accent, success, warning, danger) so a danger toggle reads as destructive. Without a tone, the switch defaults to accent.

Acceptance criteria

• input[type="switch"] styled natively where supported (track, thumb, active color)
• Fallback: data-switch on a hidden checkbox with a styled label thumb
• data-variant="<tone>" retints the active state via the tone resolver
• Disabled state visible (opacity, cursor)
• Focus ring consistent with other form fields
• All styles in @layer hikari
• prefers-reduced-motion respected
• Kitchen-sink demo shows toggles in each tone
• rules/hikari-rules.md updated with markup examples

Blocked by

None — can start immediately.