{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "ProgressIndicator",
  "description": "A progress indicator communicates to the user the progress of a particular process as a series of steps.",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Progress indicator container",
    "children": [
      {
        "name": "progress",
        "restrict": [
          "ol",
          "ul"
        ],
        "description": "An ordered list containing steps of a process",
        "attributes": {
          "static": {
            "role": "list",
            "class": "slds-progress__list"
          }
        },
        "slot": {
          "name": "default"
        },
        "children": [
          {
            "name": "item",
            "restrict": [
              "li"
            ],
            "description": "A list item for each step of the process",
            "repeats": true,
            "children": [
              {
                "name": "marker",
                "restrict": [
                  "button",
                  "div",
                  "span"
                ],
                "description": "Dot indicator for each step",
                "children": [
                  {
                    "name": "markerIcon",
                    "description": "Optional icon glyph rendered inside the marker for completed or errored steps",
                    "component": "PrimitiveIcon",
                    "renderWhen": {
                      "prop": "marker",
                      "eq": "icon"
                    },
                    "attributes": {
                      "static": {
                        "class": "slds-icon slds-icon_xx-small"
                      }
                    },
                    "children": [
                      {
                        "name": "markerIconUse"
                      }
                    ]
                  },
                  {
                    "name": "markerAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Screen-reader-only label describing the step's state",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-progress__marker"
                  }
                },
                "modifiers": [
                  {
                    "name": "icon",
                    "attribute": "class",
                    "value": "slds-progress__marker_icon",
                    "description": "Modifier that notifies the marker indicator that the step has been completed and its getting an icon"
                  },
                  {
                    "name": "iconSuccess",
                    "attribute": "class",
                    "value": "slds-progress__marker_icon-success",
                    "description": "Turn completed stage checkmark green"
                  },
                  {
                    "name": "iconContainer",
                    "attribute": "class",
                    "value": "slds-icon_container",
                    "description": "Marker also acts as an SLDS icon container (vertical icon markers render the icon container directly on the marker element)"
                  }
                ],
                "variants": [
                  {
                    "name": "utilityIcon",
                    "description": "Utility sprite glyph applied to the marker when it acts as an icon container",
                    "options": [
                      {
                        "value": "success",
                        "class": "slds-icon-utility-success"
                      },
                      {
                        "value": "error",
                        "class": "slds-icon-utility-error"
                      }
                    ]
                  }
                ]
              },
              {
                "name": "itemContent",
                "restrict": [
                  "div"
                ],
                "description": "Support content in line with progress marker",
                "renderWhen": {
                  "prop": "layout",
                  "eq": "vertical"
                },
                "attributes": {
                  "static": {
                    "class": "slds-progress__item_content slds-grid slds-grid_align-spread"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-progress__item"
              }
            }
          }
        ]
      },
      {
        "name": "progressBar",
        "restrict": [
          "div"
        ],
        "description": "Progress bar that summarizes overall completion percentage",
        "attributes": {
          "static": {
            "role": "progressbar",
            "class": "slds-progress-bar slds-progress-bar_x-small",
            "aria-valuemin": "0",
            "aria-valuemax": "100"
          },
          "bound": {
            "aria-valuenow": {
              "prop": "value"
            },
            "aria-label": {
              "prop": "label"
            }
          }
        },
        "children": [
          {
            "name": "progressBarValue",
            "restrict": [
              "span"
            ],
            "description": "Filled portion of the progress bar (sized by inline width)",
            "children": [
              {
                "name": "progressBarAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Screen-reader-only label announcing the current progress percentage",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-progress-bar__value"
              }
            }
          }
        ]
      },
      {
        "name": "stepTooltip",
        "restrict": [
          "div"
        ],
        "description": "Optional tooltip popover that labels the currently active step",
        "attributes": {
          "static": {
            "role": "tooltip",
            "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom"
          }
        },
        "children": [
          {
            "name": "stepTooltipBody",
            "restrict": [
              "div"
            ],
            "description": "Tooltip text content",
            "attributes": {
              "static": {
                "class": "slds-popover__body"
              }
            }
          }
        ]
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-progress"
      }
    },
    "modifiers": [
      {
        "name": "shade",
        "attribute": "class",
        "value": "slds-progress_shade",
        "description": "When on a shaded background such as the modal footer"
      },
      {
        "name": "vertical",
        "attribute": "class",
        "value": "slds-progress_vertical",
        "description": "Vertical layout"
      }
    ]
  },
  "states": [
    {
      "name": "currentStep",
      "type": "enum",
      "description": "Index of current step",
      "options": []
    },
    {
      "name": "hasError",
      "type": "boolean",
      "aria": "aria-invalid",
      "description": "Whether current step has error"
    },
    {
      "name": "completed",
      "type": "boolean",
      "description": "whether a step is completed"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "step-labels",
        "description": "Each step should have an accessible label"
      },
      {
        "id": "current-step",
        "description": "Current step should be indicated to screen readers"
      },
      {
        "id": "progressbar-values",
        "description": "The progress bar must expose aria-valuemin, aria-valuemax, and aria-valuenow plus an accessible label naming what is progressing"
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2016-06-01",
      "genReady": false,
      "lbc": "lightning-progress-indicator"
    }
  },
  "cssSource": "./progressIndicator.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "hasError",
      "class": "slds-has-error",
      "description": "Indicates error state for a step in the progress"
    },
    {
      "state": "currentStep",
      "class": "slds-is-active",
      "description": "Stateful class for the active step"
    },
    {
      "state": "completed",
      "class": "slds-is-completed",
      "description": "Stateful class for a completed step, `.slds-progress__item` should receive a success icon at this point"
    }
  ]
}