{
  "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": "wizard",
  "family": "forms-advanced",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "forms-advanced",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": false,
    "testImplemented": false,
    "states": 7
  },
  "title": "Wizard",
  "summary": "A multi-step form with a stepper header, the current panel and back/next actions; native buttons with aria-current=\"step\".",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-wizard",
    "spec": "spec/components/wizard.md",
    "brief": "exports/components/wizard.brief.txt"
  },
  "native": true,
  "aria": {
    "pattern": "native <button>s in an <ol>; the current step carries aria-current=step; the panel is a section named by its heading",
    "apg": "https://www.w3.org/WAI/ARIA/apg/practices/forms/"
  },
  "variants": [
    {
      "id": "numbered",
      "name": "Numbered steps"
    },
    {
      "id": "icons",
      "name": "Glyph markers"
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default",
    "hover",
    "focus-visible",
    "current",
    "disabled",
    "invalid",
    "busy"
  ],
  "tokens": {
    "steps.divider": {
      "alias": "color.border.divider",
      "value": "#2b0e0d",
      "status": "proposed",
      "deprecated": false,
      "decisionId": "D-008",
      "eligibility": {
        "action": "use-and-report",
        "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
        "decisionIds": [
          "D-008"
        ]
      }
    },
    "step.text": {
      "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": []
      }
    },
    "step.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": []
      }
    },
    "step.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": []
      }
    },
    "step.text-current": {
      "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": []
      }
    },
    "step.indicator-current": {
      "alias": "color.border.selected-indicator",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "step.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": []
      }
    },
    "step.marker-complete": {
      "alias": "color.status.success.text",
      "value": "#86a46f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "step.marker-invalid": {
      "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": []
      }
    },
    "step.indicator-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": []
      }
    },
    "panel.bg": {
      "alias": "color.surface.default",
      "value": "#100c0c",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-023",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "panel.border": {
      "alias": "color.border.default",
      "value": "#531310",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "title.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": []
      }
    },
    "text.text": {
      "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": []
      }
    },
    "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": []
      }
    },
    "next.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": []
      }
    },
    "next.text": {
      "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": []
      }
    },
    "next.bg-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": []
      }
    },
    "next.bg-pressed": {
      "alias": "color.action.primary.pressed-bg",
      "value": "#630f0d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "next.border": {
      "alias": "color.action.primary.border",
      "value": "#9e231f",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "next.ring": {
      "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": []
      }
    },
    "back.text": {
      "alias": "color.action.secondary.text",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "back.border": {
      "alias": "color.action.secondary.border",
      "value": "#a3676b",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "back.bg-hover": {
      "alias": "color.action.secondary.hover-bg",
      "value": "#630f0d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "busy.glyph": {
      "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": []
      }
    }
  },
  "stateRules": [
    {
      "state": "default",
      "visual": "steps in {color.text.default}; complete steps carry the ✓ in {color.status.success.text}",
      "channel": "the ✓ glyph; the numbers",
      "tokens": {
        "fg": {
          "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": []
          }
        },
        "bg": {
          "alias": "color.surface.canvas",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "hover",
      "visual": "step background → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg}",
      "channel": "cursor: pointer",
      "tokens": {
        "fg": {
          "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": []
          }
        },
        "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": []
          }
        }
      }
    },
    {
      "state": "focus-visible",
      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; on Next's fill the ring takes {color.interaction.focus.ring-container}",
      "channel": "the ring",
      "tokens": {
        "fg": {
          "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": []
          }
        },
        "bg": {
          "alias": "color.surface.canvas",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "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": "current",
      "visual": "2px {color.border.selected-indicator} under the step; name in {color.text.bright}",
      "channel": "`aria-current=\"step\"`; the indicator bar; the heading reads \"Step n of m\"",
      "tokens": {
        "fg": {
          "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": []
          }
        },
        "bg": {
          "alias": "color.surface.canvas",
          "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.selected-indicator",
          "value": "#e53935",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "disabled",
      "visual": "a future step in {color.text.disabled}; no hover",
      "channel": "`disabled`; cursor: not-allowed; skipped by Tab",
      "tokens": {}
    },
    {
      "state": "invalid",
      "visual": "the step's marker becomes ✕ in {color.status.danger.text}; its indicator takes {color.status.danger.border}; the panel shows the message",
      "channel": "glyph; message text; `aria-invalid` on the failing fields",
      "tokens": {
        "fg": {
          "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": []
          }
        },
        "bg": {
          "alias": "color.surface.canvas",
          "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": "busy",
      "visual": "Next shows the static ⋯ glyph before its label and does not respond; size unchanged",
      "channel": "`aria-busy` on the wizard; the glyph; cursor: progress",
      "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": []
          }
        }
      }
    }
  ],
  "keyboard": [
    {
      "key": "Tab / Shift+Tab",
      "action": "Reaches each enabled step button, the panel's fields, then Back and Next; future steps are disabled and skipped."
    },
    {
      "key": "Enter / Space",
      "action": "On a step button, goes to that step if it is reachable; on Next, validates the panel and advances; on Back, returns without validating."
    },
    {
      "key": "Escape",
      "action": "Nothing; leaving a wizard is an explicit Cancel or the host's navigation."
    }
  ],
  "responsive": "The stepper wraps to a vertical list below 600px, the panel and actions stack, and Next stays last in reading order; nothing scrolls horizontally at 320px. RTL mirrors the progression, the markers and the action order.",
  "portability": {
    "web": "an <ol> of <button type=button> with aria-current=step on the current one and disabled on unreachable ones; the panel is a <section aria-labelledby>; focus moves to the panel heading after each step change; no role=tablist, because steps are sequential and validated.",
    "nativeFallbacks": [
      "GTK4 Assistant; the page list maps to the stepper, the current page to the indicator.",
      "Qt QWizard; the side widget lists steps, the current one bold with the indicator.",
      "Terminal UI: a breadcrumb line of steps above the form, the current one underlined."
    ]
  },
  "fixtures": [
    "FX-LONG",
    "FX-320",
    "FX-ZOOM-200",
    "FX-I18N",
    "FX-RTL",
    "FX-RM",
    "FX-HC",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "button",
    "fieldset",
    "tabs",
    "breadcrumbs",
    "progress",
    "admin-form"
  ],
  "specimens": [
    "admin-form",
    "settings-panel"
  ],
  "nonExamples": "Tabs restyled as steps. A progress bar in place of the stepper. Circles with\nconnecting lines that need a rounded radius. Future steps that look enabled\nand reject the click. A spinner on Next. Colour-only completion marks.\nValidation that blocks Back. Animated slides between panels.",
  "contrast": [
    {
      "label": "wizard default text",
      "state": "default",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.surface.canvas",
      "fgHex": "#e99499",
      "bgHex": "#000000",
      "ratio": 9.16,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard hover text",
      "state": "hover",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.interaction.hover.bg",
      "fgHex": "#e99499",
      "bgHex": "#1c0a09",
      "ratio": 8.35,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard focus-visible text",
      "state": "focus-visible",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.canvas",
      "fgHex": "#ffa2a7",
      "bgHex": "#000000",
      "ratio": 10.98,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard focus-visible outline",
      "state": "focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.interaction.focus.ring",
      "bg": "color.surface.canvas",
      "fgHex": "#e53935",
      "bgHex": "#000000",
      "ratio": 4.97,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard current text",
      "state": "current",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.canvas",
      "fgHex": "#ffa2a7",
      "bgHex": "#000000",
      "ratio": 10.98,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard current border",
      "state": "current",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.selected-indicator",
      "bg": "color.surface.canvas",
      "fgHex": "#e53935",
      "bgHex": "#000000",
      "ratio": 4.97,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard invalid text",
      "state": "invalid",
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.danger.text",
      "bg": "color.surface.canvas",
      "fgHex": "#f73f35",
      "bgHex": "#000000",
      "ratio": 5.72,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard invalid border",
      "state": "invalid",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.danger.border",
      "bg": "color.surface.canvas",
      "fgHex": "#e53935",
      "bgHex": "#000000",
      "ratio": 4.97,
      "pass": true,
      "waiver": null
    },
    {
      "label": "wizard busy text",
      "state": "busy",
      "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": "complete marker on the canvas",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.success.text",
      "bg": "color.surface.canvas",
      "fgHex": "#86a46f",
      "bgHex": "#000000",
      "ratio": 7.55,
      "pass": true,
      "waiver": null
    },
    {
      "label": "panel title 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": "panel 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": "step 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": "panel edge (decorative)",
      "state": null,
      "kind": "ui",
      "min": 1,
      "fg": "color.border.default",
      "bg": "color.surface.canvas",
      "fgHex": "#531310",
      "bgHex": "#000000",
      "ratio": 1.47,
      "pass": true,
      "waiver": "the panel is identified by its heading and position, not by this edge"
    },
    {
      "label": "back button text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.secondary.text",
      "bg": "color.surface.canvas",
      "fgHex": "#ffa2a7",
      "bgHex": "#000000",
      "ratio": 10.98,
      "pass": true,
      "waiver": null
    },
    {
      "label": "back button boundary",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.action.secondary.border",
      "bg": "color.surface.canvas",
      "fgHex": "#a3676b",
      "bgHex": "#000000",
      "ratio": 4.71,
      "pass": true,
      "waiver": null
    },
    {
      "label": "next button boundary",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.action.primary.border",
      "bg": "color.surface.canvas",
      "fgHex": "#9e231f",
      "bgHex": "#000000",
      "ratio": 2.71,
      "pass": false,
      "waiver": "the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard"
    },
    {
      "label": "ring on the next button's fill",
      "state": "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": "future step text (exempt; house floor 3:1)",
      "state": "disabled",
      "kind": "ui",
      "min": 3,
      "fg": "color.text.disabled",
      "bg": "color.surface.canvas",
      "fgHex": "#8a5559",
      "bgHex": "#000000",
      "ratio": 3.52,
      "pass": true,
      "waiver": null
    }
  ]
}