{
  "schemaVersion": 1,
  "theme": "j3w1-theme",
  "version": "1.1.0",
  "profile": "default",
  "profileStatus": "approved",
  "release": {
    "version": "1.1.0",
    "stability": "release",
    "policy": "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."
  },
  "sourceDigest": "sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=",
  "id": "radio-group",
  "family": "forms-basic",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "forms-basic",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": true,
    "testImplemented": true,
    "states": 8
  },
  "title": "Radio group",
  "summary": "A fieldset of native radios for one exclusive choice; each radio is a 16px square that fills with the primary action colour and an inner square when checked.",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-radio-group",
    "spec": "spec/components/radio-group.md",
    "brief": "exports/components/radio-group.brief.txt"
  },
  "native": true,
  "aria": {
    "pattern": "native <input type=\"radio\"> inside <fieldset> with <legend>",
    "apg": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/"
  },
  "variants": [
    {
      "id": "default",
      "name": "Vertical"
    },
    {
      "id": "horizontal",
      "name": "Horizontal",
      "description": "Options in a row that wraps; for two or three short labels."
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default",
    "hover",
    "focus-visible",
    "checked",
    "checked+focus-visible",
    "disabled",
    "invalid",
    "required"
  ],
  "tokens": {
    "box.bg": {
      "alias": "color.surface.input",
      "value": "#000000",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-023",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.border": {
      "alias": "color.border.control",
      "value": "#a3676b",
      "status": "proposed",
      "deprecated": false,
      "decisionId": "D-007",
      "eligibility": {
        "action": "use-and-report",
        "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
        "decisionIds": [
          "D-007"
        ]
      }
    },
    "box.bg-hover": {
      "alias": "color.interaction.hover.bg",
      "value": "#1c0a09",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.ring": {
      "alias": "color.interaction.focus.ring",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.bg-checked": {
      "alias": "color.action.primary.bg",
      "value": "#7d1310",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-026",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.bg-checked-hover": {
      "alias": "color.action.primary.hover-bg",
      "value": "#911410",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.dot": {
      "alias": "color.action.primary.text",
      "value": "#f4eeee",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.ring-checked": {
      "alias": "color.interaction.focus.ring-container",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.border-invalid": {
      "alias": "color.status.danger.border",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.bg-disabled": {
      "alias": "color.interaction.disabled.bg",
      "value": "#160b0b",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.border-disabled": {
      "alias": "color.border.disabled",
      "value": "#7d1310",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "box.dot-disabled": {
      "alias": "color.text.disabled",
      "value": "#8a5559",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-003",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "text.default": {
      "alias": "color.text.default",
      "value": "#e99499",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "text.disabled": {
      "alias": "color.text.disabled",
      "value": "#8a5559",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-003",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "legend.text": {
      "alias": "color.text.bright",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "legend.required-mark": {
      "alias": "color.status.danger.text",
      "value": "#f73f35",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "message.text": {
      "alias": "color.status.danger.text",
      "value": "#f73f35",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    }
  },
  "stateRules": [
    {
      "state": "default",
      "visual": "16px square, 1px {color.border.control} on {color.surface.input}; text {color.text.default}",
      "channel": "—",
      "tokens": {
        "bg": {
          "alias": "color.surface.input",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.border.control",
          "value": "#a3676b",
          "status": "proposed",
          "deprecated": false,
          "decisionId": "D-007",
          "eligibility": {
            "action": "use-and-report",
            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
            "decisionIds": [
              "D-007"
            ]
          }
        }
      }
    },
    {
      "state": "hover",
      "visual": "box background → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg}",
      "channel": "cursor: pointer; hover-capable pointers only",
      "tokens": {
        "bg": {
          "alias": "color.interaction.hover.bg",
          "value": "#1c0a09",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.border.control",
          "value": "#a3676b",
          "status": "proposed",
          "deprecated": false,
          "decisionId": "D-007",
          "eligibility": {
            "action": "use-and-report",
            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
            "decisionIds": [
              "D-007"
            ]
          }
        }
      }
    },
    {
      "state": "focus-visible",
      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the box",
      "channel": "the ring",
      "tokens": {
        "bg": {
          "alias": "color.surface.input",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.border.control",
          "value": "#a3676b",
          "status": "proposed",
          "deprecated": false,
          "decisionId": "D-007",
          "eligibility": {
            "action": "use-and-report",
            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
            "decisionIds": [
              "D-007"
            ]
          }
        },
        "outline": {
          "alias": "color.interaction.focus.ring",
          "value": "#e53935",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "checked",
      "visual": "box fills {color.action.primary.bg}; an 8px inner square in {color.action.primary.text}; border stays {color.border.control}",
      "channel": "the inner square; `checked`",
      "tokens": {
        "fg": {
          "alias": "color.action.primary.text",
          "value": "#f4eeee",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.action.primary.bg",
          "value": "#7d1310",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-026",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "checked+focus-visible",
      "visual": "the fill and a ring in {color.interaction.focus.ring-container}",
      "channel": "inner square and ring",
      "tokens": {
        "fg": {
          "alias": "color.action.primary.text",
          "value": "#f4eeee",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.action.primary.bg",
          "value": "#7d1310",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-026",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "outline": {
          "alias": "color.interaction.focus.ring-container",
          "value": "#ffa2a7",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "disabled",
      "visual": "boxes {color.interaction.disabled.bg} with 1px {color.border.disabled}; inner square and text {color.text.disabled}",
      "channel": "`disabled`; cursor: not-allowed",
      "tokens": {}
    },
    {
      "state": "invalid",
      "visual": "every box border 2px {color.status.danger.border}; message with the ✕ glyph",
      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
      "tokens": {
        "bg": {
          "alias": "color.surface.input",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.status.danger.border",
          "value": "#e53935",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "required",
      "visual": "`*` after the legend in {color.status.danger.text} plus visually hidden \"required\"",
      "channel": "`required`; the mark",
      "tokens": {
        "bg": {
          "alias": "color.surface.input",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.border.control",
          "value": "#a3676b",
          "status": "proposed",
          "deprecated": false,
          "decisionId": "D-007",
          "eligibility": {
            "action": "use-and-report",
            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
            "decisionIds": [
              "D-007"
            ]
          }
        }
      }
    }
  ],
  "keyboard": [
    {
      "key": "Tab / Shift+Tab",
      "action": "Enters the group on the checked radio, or the first when none is checked; leaves it entirely."
    },
    {
      "key": "Up / Down / Left / Right",
      "action": "Moves the check to the previous or next radio and selects it (native); wraps at the ends."
    },
    {
      "key": "Space",
      "action": "Checks the focused radio when none is checked."
    }
  ],
  "responsive": "Vertical groups stack at every width. The horizontal variant wraps into rows at 320px and keeps a 16px gap between options. RTL mirrors the box to the inline start and reverses the row.",
  "portability": {
    "web": "native <input type=\"radio\"> sharing a name, each inside a <label>, all inside <fieldset> with <legend>; never role=\"radiogroup\" on a div when the native group is available; the message is linked from the fieldset.",
    "nativeFallbacks": [
      "GTK4 CheckButton with a group; square indicator through CSS.",
      "Qt QRadioButton in a QButtonGroup; indicator subcontrol styled square.",
      "Terminal UI: (o) and ( ) glyphs; arrow keys move the mark."
    ]
  },
  "fixtures": [
    "FX-LONG",
    "FX-320",
    "FX-ZOOM-200",
    "FX-I18N",
    "FX-RTL",
    "FX-RM",
    "FX-HC",
    "FX-TOUCH",
    "FX-DENSITY",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "checkbox",
    "switch",
    "segmented-control",
    "fieldset",
    "field",
    "select"
  ],
  "specimens": [
    "settings-panel",
    "admin-form"
  ],
  "nonExamples": "Circular radios. A checked state shown by border colour alone with no inner\nsquare. Radios that submit or navigate on change. A group with no legend or\nwith the legend rendered as a label on one option. Separate tab stops per\nradio. One radio on its own. Disabling by opacity. A div with\n`role=\"radiogroup\"` built from spans.",
  "contrast": [
    {
      "label": "radio-group default border",
      "state": "default",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.surface.input",
      "fgHex": "#a3676b",
      "bgHex": "#000000",
      "ratio": 4.71,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group hover border",
      "state": "hover",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.interaction.hover.bg",
      "fgHex": "#a3676b",
      "bgHex": "#1c0a09",
      "ratio": 4.29,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group focus-visible border",
      "state": "focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.surface.input",
      "fgHex": "#a3676b",
      "bgHex": "#000000",
      "ratio": 4.71,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group focus-visible outline",
      "state": "focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.interaction.focus.ring",
      "bg": "color.surface.input",
      "fgHex": "#e53935",
      "bgHex": "#000000",
      "ratio": 4.97,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group checked text",
      "state": "checked",
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.primary.text",
      "bg": "color.action.primary.bg",
      "fgHex": "#f4eeee",
      "bgHex": "#7d1310",
      "ratio": 9.28,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group checked+focus-visible text",
      "state": "checked+focus-visible",
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.primary.text",
      "bg": "color.action.primary.bg",
      "fgHex": "#f4eeee",
      "bgHex": "#7d1310",
      "ratio": 9.28,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group checked+focus-visible outline",
      "state": "checked+focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.interaction.focus.ring-container",
      "bg": "color.action.primary.bg",
      "fgHex": "#ffa2a7",
      "bgHex": "#7d1310",
      "ratio": 5.57,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group invalid border",
      "state": "invalid",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.danger.border",
      "bg": "color.surface.input",
      "fgHex": "#e53935",
      "bgHex": "#000000",
      "ratio": 4.97,
      "pass": true,
      "waiver": null
    },
    {
      "label": "radio-group required border",
      "state": "required",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.surface.input",
      "fgHex": "#a3676b",
      "bgHex": "#000000",
      "ratio": 4.71,
      "pass": true,
      "waiver": null
    },
    {
      "label": "option text on the panel surface",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.surface.default",
      "fgHex": "#e99499",
      "bgHex": "#100c0c",
      "ratio": 8.48,
      "pass": true,
      "waiver": null
    },
    {
      "label": "legend on the panel surface",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.default",
      "fgHex": "#ffa2a7",
      "bgHex": "#100c0c",
      "ratio": 10.17,
      "pass": true,
      "waiver": null
    },
    {
      "label": "checked radio edge against the panel (the border stays border.control)",
      "state": "checked",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.surface.default",
      "fgHex": "#a3676b",
      "bgHex": "#100c0c",
      "ratio": 4.36,
      "pass": true,
      "waiver": null
    },
    {
      "label": "inner square on the hovered checked fill",
      "state": "hover",
      "kind": "ui",
      "min": 3,
      "fg": "color.action.primary.text",
      "bg": "color.action.primary.hover-bg",
      "fgHex": "#f4eeee",
      "bgHex": "#911410",
      "ratio": 7.92,
      "pass": true,
      "waiver": null
    },
    {
      "label": "validation message on the panel surface",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.danger.text",
      "bg": "color.surface.default",
      "fgHex": "#f73f35",
      "bgHex": "#100c0c",
      "ratio": 5.29,
      "pass": true,
      "waiver": null
    },
    {
      "label": "disabled option text (exempt; house floor 3:1)",
      "state": "disabled",
      "kind": "ui",
      "min": 3,
      "fg": "color.text.disabled",
      "bg": "color.surface.default",
      "fgHex": "#8a5559",
      "bgHex": "#100c0c",
      "ratio": 3.26,
      "pass": true,
      "waiver": null
    },
    {
      "label": "disabled inner square (exempt; house floor 3:1)",
      "state": "disabled",
      "kind": "ui",
      "min": 3,
      "fg": "color.text.disabled",
      "bg": "color.interaction.disabled.bg",
      "fgHex": "#8a5559",
      "bgHex": "#160b0b",
      "ratio": 3.24,
      "pass": true,
      "waiver": null
    },
    {
      "label": "disabled border (exempt)",
      "state": "disabled",
      "kind": "ui",
      "min": 1,
      "fg": "color.border.disabled",
      "bg": "color.interaction.disabled.bg",
      "fgHex": "#7d1310",
      "bgHex": "#160b0b",
      "ratio": 1.82,
      "pass": true,
      "waiver": "disabled controls are exempt from 1.4.11"
    }
  ]
}