j3w1/theme implementation brief — switch
theme: j3w1-theme 1.1.0  profile: default  sourceDigest: sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=
pin: https://raw.githubusercontent.com/j3w1/theme/v1.1.0/exports/components/switch.json
spec: spec/components/switch.md  site: https://j3w1.github.io/theme/reference/#c-switch
maturity: stable  priority: R1

Summary: An on/off control that takes effect immediately; a button with role switch and aria-checked, drawn as a square-cornered track with a square thumb that fills with the primary colour when on.

Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
Tokens (resolved):
  track.bg                #000000  ({color.surface.input})  use
  track.border            #a3676b  ({color.border.control})  use-and-report (D-007)
  track.bg-hover          #1c0a09  ({color.interaction.hover.bg})  use
  track.ring              #e53935  ({color.interaction.focus.ring})  use
  track.bg-checked        #7d1310  ({color.action.primary.bg})  use
  track.bg-checked-hover  #911410  ({color.action.primary.hover-bg})  use
  track.ring-checked      #ffa2a7  ({color.interaction.focus.ring-container})  use
  track.bg-disabled       #160b0b  ({color.interaction.disabled.bg})  use
  track.border-disabled   #7d1310  ({color.border.disabled})  use
  thumb.bg                #e99499  ({color.text.default})  use
  thumb.bg-checked        #f4eeee  ({color.action.primary.text})  use
  thumb.bg-disabled       #8a5559  ({color.text.disabled})  use
  name.text               #e99499  ({color.text.default})  use
  state.text              #bd787d  ({color.text.muted})  use
  name.text-disabled      #8a5559  ({color.text.disabled})  use
State dependency disclosures: D-007

States: default, hover, focus-visible, checked, checked+focus-visible, disabled, checked+disabled
  default: track 1px {color.border.control} on {color.surface.input}; thumb {color.text.default} at the start [thumb position]
  hover: track background → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the track [the ring]
  checked: track fills {color.action.primary.bg}; thumb {color.action.primary.text} moves to the end; border stays {color.border.control}; the word reads "On" [`aria-checked="true"`; thumb position; the word]
  checked+focus-visible: the fill and a ring in {color.interaction.focus.ring-container} on the track [position and ring]
  disabled: track {color.interaction.disabled.bg} with 1px {color.border.disabled}; thumb and name {color.text.disabled} [`disabled`; cursor: not-allowed]
  checked+disabled: as disabled with the thumb at the end [`disabled`; `aria-checked="true"`; thumb position]

Keyboard:
  Tab / Shift+Tab: Moves focus to and from the switch.
  Space / Enter: Toggles aria-checked and applies the change at once.

ARIA: <button type="button" role="switch" aria-checked> (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
Responsive: Fixed track; the visible name wraps before it at 320px and the Off / On word never wraps. RTL mirrors the thumb position (start is the inline start) and the row order.
Portability: <button type="button" role="switch" aria-checked="true|false"> with aria-label or aria-labelledby; the host toggles aria-checked and mirrors it to data-state-checked; never an input type=checkbox with role switch when the change is not immediate, and never a checkbox styled as a switch inside a form that submits.
  native: GTK4 Switch; square corners through CSS.
  native: Qt has no switch; a QCheckBox with a custom indicator, documented.
  native: Terminal UI: [ |  ] and [  |#] glyph pairs with the on state inverted.

Rules: use only these values; no invented colours; radius 0; borders 1px (2px emphasis); focus is a 1px dashed ring, selection is a fill;
do not restyle unrelated elements; report deviations per agents/consume.md; record theme.lock.json at the pinned revision.