{
  "tag": "ed-step",
  "kind": "component",
  "summary": "A single stage inside an `<ed-stepper>`, showing its position, label and status.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/step/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/step/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon",
    "ed-progress-ring"
  ],
  "use": [
    "One stage of a process, such as \"Upload documents\" or \"Review\", showing its label and whether it is done, current or blocked",
    "A step that shows it is loading or needs attention, so a user sees which stage holds up the process",
    "A process stage with a short description beneath its label, explaining in a line what happens there"
  ],
  "notFor": [
    {
      "when": "A step of a guided task with its own content and Back/Next buttons",
      "instead": "a [Wizard Step](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard-step) inside a [Wizard](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard)"
    },
    {
      "when": "Used on its own outside a stepper",
      "instead": "a [Stepper](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/stepper), which provides the sequence and current position"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "name",
        "property": "name",
        "type": "string",
        "default": "''",
        "description": "Identifies the step. Matched against the stepper's `active` attribute and used in events."
      },
      {
        "name": "completed",
        "property": "completed",
        "type": "boolean",
        "default": "false",
        "description": "Marks the step done. Shows a checkmark instead of the step number."
      },
      {
        "name": "loading",
        "property": "loading",
        "type": "boolean",
        "default": "false",
        "description": "Shows a loading indicator instead of the step number, e.g. while an async transition is in progress."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Makes the step non-interactive. It can't be clicked or reached with `next()`/`goTo()`, and it renders as a\ndisabled button when the stepper is `clickable`."
      },
      {
        "name": "variant",
        "property": "variant",
        "type": "'warning' | 'brand' | 'neutral' | 'success' | 'danger'",
        "default": "'brand'",
        "description": "Colors the step's marker with a semantic color. Upcoming steps keep a neutral outline in every variant, so a\ndefault stepper reads quietly. The color is cosmetic; pair it with an icon in the `icon` slot and a clear label when a\nstep needs to read as failed or flagged."
      },
      {
        "name": "attention",
        "property": "attention",
        "type": "'none' | 'pulse' | 'bounce'",
        "default": "'none'",
        "description": "Adds an animation to the step's marker to draw attention to it, e.g. the step the user should do next."
      },
      {
        "name": "with-description",
        "property": "withDescription",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `description` element, so the server-rendered\nmarkup includes it before the component hydrates on the client."
      },
      {
        "name": "active",
        "property": "active",
        "type": "boolean",
        "default": "false",
        "description": "Draws the step as the stepper's current step. The parent `<ed-stepper>` sets this from its own `active`\nattribute, so you only need to set it yourself for SSR."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [],
    "slots": [
      {
        "name": "",
        "description": "The step's label."
      },
      {
        "name": "description",
        "description": "Optional text shown under the label."
      },
      {
        "name": "icon",
        "description": "An element, such as `<ed-icon>`, that replaces the step number, checkmark or loading indicator."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-step-pulse-color",
        "description": "The color of the marker's pulse effect when using `attention=\"pulse\"`. Defaults to the step's accent color."
      }
    ],
    "parts": [
      {
        "name": "step",
        "description": "The component's outer wrapper."
      },
      {
        "name": "connector",
        "description": "The line connecting this step to its neighbors. Each step draws the half leading in and the half leading out, and both carry this part name."
      },
      {
        "name": "button",
        "description": "The `<button>` wrapping the marker and content. Only rendered when the parent stepper is `clickable`; otherwise the same wrapper is a plain, non-focusable element."
      },
      {
        "name": "marker",
        "description": "The circular marker that shows the step's number, checkmark or loading indicator."
      },
      {
        "name": "spinner",
        "description": "The progress ring shown in the marker while the step is `loading`."
      },
      {
        "name": "content",
        "description": "The wrapper around the label, status text and description."
      },
      {
        "name": "label",
        "description": "The step's label."
      },
      {
        "name": "status",
        "description": "Visually hidden text that tells assistive technology whether the step is completed, not completed, disabled or locked."
      },
      {
        "name": "description",
        "description": "The step's description."
      }
    ],
    "states": [
      {
        "name": "active",
        "description": "Applied when this is the parent stepper's current step."
      },
      {
        "name": "completed",
        "description": "Mirrors the `completed` attribute."
      },
      {
        "name": "loading",
        "description": "Mirrors the `loading` attribute."
      },
      {
        "name": "disabled",
        "description": "Mirrors the `disabled` attribute."
      },
      {
        "name": "locked",
        "description": "Applied by the parent stepper when `linear` is set and this step can't be reached yet, i.e. it comes after the first incomplete step. Never applied to the active step."
      },
      {
        "name": "clickable",
        "description": "Applied by the parent stepper when its `clickable` attribute is set, allowing this step to be clicked or activated (Enter/Space) directly."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/step/step.js';",
  "react": {
    "component": "EdStep",
    "import": "import EdStep from '@eurodata/eurodata-ui/dist/react/step/index.js';"
  }
}