{
  "name": "StepperStep",
  "source": "src/components/Stepper.tsx",
  "propsType": "StepperStepProps",
  "import": "import { StepperStep } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One step in a Stepper: a numbered indicator, a name, and a status carried by shape and text as well as colour.",
  "useWhen": [
    "inside a Stepper, once per step"
  ],
  "useInstead": [
    {
      "when": "it is a step an agent is running",
      "use": "AgentActivityStep"
    }
  ],
  "variants": {
    "status": {
      "incomplete": {
        "use": "the default — not yet answered. Never a link, even with href"
      },
      "complete": {
        "use": "answers accepted by the server, not merely filled in"
      },
      "error": {
        "use": "the step's answers were rejected. Put the reason on the step's fields, not here"
      }
    }
  },
  "slots": {
    "children": {
      "accepts": "text",
      "note": "the step's name, short — \"Shipping\", not \"Enter your shipping details\""
    },
    "description": {
      "accepts": "text",
      "note": "what the step asks for, or a summary of the answer once complete"
    }
  },
  "a11y": {
    "guarantees": [
      "the current step and incomplete steps render as text, never as links, whatever href or onPress say",
      "complete and error use different glyphs — a check and an exclamation — so status survives greyscale and forced-colours mode"
    ],
    "notes": [
      "status and isCurrent are separate on purpose: a user who goes Back to step 1 is on a step that is both current and complete"
    ]
  },
  "antiPatterns": [
    {
      "dont": "status=\"complete\" as soon as the fields are filled",
      "do": "mark it complete when the server accepts the step",
      "why": "a green check on answers that are later rejected sends the user back through a step they were told was finished"
    },
    {
      "dont": "href on every step so users can jump ahead",
      "why": "incomplete steps ignore it; skipping unanswered steps is what a wizard exists to prevent"
    },
    {
      "dont": "using it outside Stepper",
      "why": "it renders an <li> and reads its position from the Stepper, and throws without one"
    }
  ],
  "stylesheet": "src/styles/stepper.css",
  "tokens": [
    "--border-default",
    "--border-error",
    "--border-focus",
    "--border-primary",
    "--border-strong",
    "--border-width-thick",
    "--border-width-thicker",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-semibold",
    "--icon-error",
    "--icon-primary",
    "--icon-size-lg",
    "--icon-size-sm",
    "--ion-duration-base",
    "--ion-ease-out",
    "--radius-full",
    "--radius-xs",
    "--spacing-16",
    "--spacing-2",
    "--spacing-24",
    "--spacing-4",
    "--spacing-8",
    "--surface-error",
    "--surface-primary",
    "--text-default",
    "--text-error",
    "--text-on-color",
    "--text-secondary",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "The step's name, in the user's language."
    },
    "description": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "A short second line — what the step asks for, or a summary of the answer."
    },
    "status": {
      "type": "StepperStepStatus | undefined",
      "required": false,
      "origin": "own",
      "description": "Whether the step's answers have been accepted. Orthogonal to `isCurrent`:\na user who goes Back to step 1 is on a step that is both current and\ncomplete.",
      "values": [
        "error",
        "incomplete",
        "complete"
      ]
    },
    "isCurrent": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "The step the user is on. Marked `aria-current=\"step\"`."
    },
    "href": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Makes a visited step a link back to it. Ignored on the current step and on\n`incomplete` steps — see the component's comment for why."
    },
    "onPress": {
      "type": "(() => void) | undefined",
      "required": false,
      "origin": "own",
      "description": "As `href`, for a wizard that changes step without a route."
    }
  },
  "propCounts": {
    "own": 6,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}