{
  "tag": "ed-wizard",
  "kind": "component",
  "summary": "Guides users through a task step by step: a stepper showing where they are, the active step's content,\nand buttons to move between steps, finish or cancel.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-button",
    "ed-icon",
    "ed-step",
    "ed-stepper",
    "ed-wizard-step"
  ],
  "use": [
    "Infrequent, complex, cognitively demanding processes, where splitting the task reduces information overload",
    "Tasks performed infrequently or only once, so the guided structure helps unfamiliar, novice, or low-expertise users",
    "Steps with logical dependencies — later steps depend on earlier answers, and branching hides irrelevant fields",
    "Processes with 3 or more clearly distinct phases, since fewer rarely justifies a progress indicator",
    "Onboarding flows, account or product setup, multi-phase application forms, guided configuration processes, and sequential data-entry workflows"
  ],
  "notFor": [
    {
      "when": "Tasks performed frequently by experienced users",
      "instead": "a regular form or page"
    },
    {
      "when": "Users need to compare or reference information across steps",
      "instead": "a single in-page form"
    },
    {
      "when": "Short processes with fewer than 3 logical phases",
      "instead": "a single form"
    },
    {
      "when": "Steps that are non-linear, or that users must freely jump between",
      "instead": "tabs or a multi-section page"
    },
    {
      "when": "A task that can be completed in under a minute",
      "instead": "a single form or dialog"
    }
  ],
  "rules": [
    {
      "id": "wizard/infrequent-fixed-order",
      "rule": "Use wizards only for processes users do not perform often and where a fixed order of steps is beneficial. For processes completed frequently or that are non-linear, avoid wizards.",
      "why": "They significantly restrict freedom and workflow."
    },
    {
      "id": "wizard/in-dialog",
      "rule": "Unless asked otherwise, run the wizard in a [Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/dialog) — the preferred home in eurodata products — and close the dialog from `ed-wizard-finish` and `ed-wizard-cancel`; the wizard does not. A step that needs the room — a preview table, a live summary beside the steps — puts the wizard on the page instead.",
      "why": "The dialog keeps the page the user started from in place behind it. A step that needs more room than a dialog has would be cramped inside it.",
      "check": "error"
    },
    {
      "id": "wizard/step-labels",
      "rule": "Give every step a meaningful descriptive label — never \"Step 1, Step 2, Step 3\".",
      "check": "error"
    },
    {
      "id": "wizard/step-heading",
      "rule": "Put the heading for a step into the step's content — the wizard's content panel has none.",
      "check": "error"
    },
    {
      "id": "wizard/step-count",
      "rule": "Keep the total step count visible at all times — never let users discover it only as they progress. The stepper shows every step and tells screen readers \"Step 2 of 4\"; a visible count such as \"Step 2 of 4\" beside it is welcome."
    },
    {
      "id": "wizard/back-navigation",
      "rule": "Allow back navigation to completed steps, and never block or hide the Back button. The wizard's Back button does it; add `clickable` when users should jump directly.",
      "check": "error"
    },
    {
      "id": "wizard/nav-buttons",
      "rule": "Complement the stepper with Back/Next buttons — the wizard provides them, or slot your own into `nav` — and never rely on step circle clicks as the only navigation method.",
      "check": "error"
    },
    {
      "id": "wizard/linear",
      "rule": "Use `linear` and set `completed` on each step when later steps depend on earlier answers, so Next stays disabled until the step is valid."
    },
    {
      "id": "wizard/validate-per-step",
      "rule": "Validate per step when the user attempts to advance — never reveal all validation errors only at final submit."
    },
    {
      "id": "wizard/preserve-data",
      "rule": "Preserve all entered data when the user navigates back — never clear it."
    },
    {
      "id": "wizard/review-step",
      "rule": "Include a review step before Finish for high-stakes flows — never use Finish as a blind submit without a summary step."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The wizard's title. If you need to display HTML, use the `label` slot instead."
      },
      {
        "name": "sublabel",
        "property": "sublabel",
        "type": "string",
        "default": "''",
        "description": "The wizard's subtitle. If you need to display HTML, use the `sublabel` slot instead."
      },
      {
        "name": "active",
        "property": "active",
        "type": "string",
        "default": "''",
        "description": "The name of the active step. Falls back to the first step if unset, or if it doesn't match any step. Assigning it\nchanges the step without emitting `ed-wizard-before-change` or `ed-wizard-change` and without moving focus."
      },
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "Lays the stepper out above the content (`horizontal`) or in a column beside it (`vertical`)."
      },
      {
        "name": "clickable",
        "property": "clickable",
        "type": "boolean",
        "default": "false",
        "description": "Allows jumping to a step by clicking it in the stepper, or focusing it and pressing Enter/Space."
      },
      {
        "name": "linear",
        "property": "linear",
        "type": "boolean",
        "default": "false",
        "description": "Requires steps to be completed in order. A step counts as completed only through its own `completed` attribute;\nwithout `linear`, every step before the furthest one reached also shows as completed. Next stays disabled while\nthe active step is not completed, and neither `goTo()` nor a click in the stepper can reach a step after the\nfirst incomplete one."
      },
      {
        "name": "next-disabled",
        "property": "nextDisabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the Next button, e.g. until the consumer's validation passes. `next()` is refused as well."
      },
      {
        "name": "previous-disabled",
        "property": "previousDisabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the Previous button, e.g. while an async operation is in progress. `previous()` is refused as well."
      },
      {
        "name": "scroll-to-top",
        "property": "scrollToTop",
        "type": "boolean",
        "default": "false",
        "description": "Scrolls the content back to the top after the user or a method changes the step."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "isFirstStep",
        "description": "True if no step before the active one can be reached, i.e. Previous has nowhere to go."
      },
      {
        "name": "isLastStep",
        "description": "True if no step after the active one can be reached, i.e. Next has nowhere to go and Finish is enabled."
      }
    ],
    "methods": [
      {
        "name": "goTo",
        "parameters": [
          {
            "name": "name",
            "type": "string"
          }
        ],
        "description": "Requests a change to the named step. Emits a cancelable `ed-wizard-before-change`; if not canceled, makes the\nstep active and emits `ed-wizard-change`. Does nothing if the step doesn't exist, is already active, is disabled,\nor (with `linear`) can't be reached yet."
      },
      {
        "name": "next",
        "description": "Goes to the next step that is not disabled, unless Next is disabled."
      },
      {
        "name": "previous",
        "description": "Goes back to the nearest step before the active one that is not disabled, unless Previous is disabled."
      }
    ],
    "events": [
      {
        "name": "ed-wizard-before-change",
        "react": "onEdWizardBeforeChange",
        "type": "{ name: string, previousName: string | null, step: EdWizardStep, previousStep: EdWizardStep | null }",
        "description": "Emitted before the active step changes through the buttons, a click in the stepper or `goTo()`/`next()`/`previous()`. Calling `event.preventDefault()` keeps the current step. Assigning `active` does not emit it."
      },
      {
        "name": "ed-wizard-change",
        "react": "onEdWizardChange",
        "type": "{ name: string, previousName: string | null, step: EdWizardStep, previousStep: EdWizardStep | null }",
        "description": "Emitted after the active step changed through the buttons, a click in the stepper or `goTo()`/`next()`/`previous()`. Assigning `active` does not emit it."
      },
      {
        "name": "ed-wizard-finish",
        "react": "onEdWizardFinish",
        "description": "Emitted when the Finish button is activated."
      },
      {
        "name": "ed-wizard-cancel",
        "react": "onEdWizardCancel",
        "description": "Emitted when the Cancel button is activated."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "One or more `<ed-wizard-step>` elements."
      },
      {
        "name": "label",
        "description": "The wizard's title. Alternatively, you can use the `label` attribute."
      },
      {
        "name": "sublabel",
        "description": "The wizard's subtitle. Alternatively, you can use the `sublabel` attribute."
      },
      {
        "name": "nav",
        "description": "Replaces the built-in Previous, Next, Finish and Cancel buttons."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "header",
        "description": "The area holding the title, the subtitle and the stepper."
      },
      {
        "name": "title",
        "description": "The wizard's title."
      },
      {
        "name": "subtitle",
        "description": "The wizard's subtitle."
      },
      {
        "name": "stepper",
        "description": "The `<ed-stepper>` showing the steps."
      },
      {
        "name": "content",
        "description": "The wrapper of the active step's content."
      },
      {
        "name": "nav",
        "description": "The wrapper of the navigation buttons, or of what is slotted into `nav`."
      },
      {
        "name": "previous",
        "description": "The Previous button."
      },
      {
        "name": "next",
        "description": "The Next button."
      },
      {
        "name": "finish",
        "description": "The Finish button."
      },
      {
        "name": "cancel",
        "description": "The Cancel button."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/wizard/wizard.js';",
  "react": {
    "component": "EdWizard",
    "import": "import EdWizard from '@eurodata/eurodata-ui/dist/react/wizard/index.js';"
  }
}