j3w1/theme implementation brief — checkbox
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/checkbox.json
spec: spec/components/checkbox.md  site: https://j3w1.github.io/theme/reference/#c-checkbox
maturity: stable  priority: R1

Summary: The native checkbox drawn as a 16px square that fills with the primary action colour and a ✓ or – glyph; single, or a fieldset group of independent choices.

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):
  box.bg                #000000  ({color.surface.input})  use
  box.border            #a3676b  ({color.border.control})  use-and-report (D-007)
  box.bg-hover          #1c0a09  ({color.interaction.hover.bg})  use
  box.ring              #e53935  ({color.interaction.focus.ring})  use
  box.bg-checked        #7d1310  ({color.action.primary.bg})  use
  box.bg-checked-hover  #911410  ({color.action.primary.hover-bg})  use
  box.glyph             #f4eeee  ({color.action.primary.text})  use
  box.ring-checked      #ffa2a7  ({color.interaction.focus.ring-container})  use
  box.border-invalid    #e53935  ({color.status.danger.border})  use
  box.bg-disabled       #160b0b  ({color.interaction.disabled.bg})  use
  box.border-disabled   #7d1310  ({color.border.disabled})  use
  box.glyph-disabled    #8a5559  ({color.text.disabled})  use
  text.default          #e99499  ({color.text.default})  use
  text.disabled         #8a5559  ({color.text.disabled})  use
  legend.text           #ffa2a7  ({color.text.bright})  use
  legend.required-mark  #f73f35  ({color.status.danger.text})  use
  message.text          #f73f35  ({color.status.danger.text})  use
State dependency disclosures: D-007

States: default, hover, focus-visible, checked, mixed, checked+focus-visible, checked+disabled, disabled, invalid, required
  default: 16px box, 1px {color.border.control} on {color.surface.input}; text {color.text.default} [—]
  hover: box background → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px around the box [the ring]
  checked: box fills {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} [the ✓ glyph; `checked`]
  mixed: box fills {color.action.primary.bg}; – in {color.action.primary.text} [the – glyph; `indeterminate` / `aria-checked="mixed"`]
  checked+focus-visible: the fill and a ring in {color.interaction.focus.ring-container} [glyph and ring]
  checked+disabled: box {color.interaction.disabled.bg} with 1px {color.border.disabled}; ✓ and text in {color.text.disabled} [glyph; `disabled`; cursor: not-allowed]
  disabled: box {color.interaction.disabled.bg} with 1px {color.border.disabled}; text {color.text.disabled} [`disabled`; cursor: not-allowed]
  invalid: box border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
  required: `*` after the text or legend in {color.status.danger.text} plus visually hidden "required" [`required`; the mark]

Keyboard:
  Tab / Shift+Tab: Moves through every checkbox; each is its own tab stop.
  Space: Toggles; a mixed box becomes checked.

ARIA: native <input type="checkbox"> with <label>; fieldset and legend for a group (https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
Responsive: The row wraps its text under itself with the box staying top-aligned; groups stack vertically at every width. RTL mirrors the box to the inline start of the text.
Portability: native <input type="checkbox"> inside <label>; indeterminate through the DOM property with the host reflecting it as data-state-mixed for styling; groups in <fieldset> with <legend>; never role="checkbox" on a div.
  native: GTK4 CheckButton; inconsistent for mixed.
  native: Qt QCheckBox with tristate; indicator subcontrol styled square.
  native: Terminal UI: [x], [ ] and [-] glyphs; the box inverted when focused.

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.