{
  "_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": "ProgressBar",
  "description": "A progress bar component communicates to the user the progress of a process.",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Progress bar container",
    "attributes": {
      "static": {
        "role": "progressbar",
        "class": "slds-progress-bar"
      },
      "bound": {
        "aria-valuemin": {
          "prop": "min"
        },
        "aria-valuemax": {
          "prop": "max"
        },
        "aria-valuenow": {
          "prop": "value"
        },
        "aria-label": {
          "prop": "label"
        },
        "aria-labelledby": {
          "prop": "labelledBy"
        }
      }
    },
    "children": [
      {
        "name": "descriptiveLabel",
        "restrict": [
          "div"
        ],
        "description": "Optional descriptive label row, rendered as a sibling above the progress bar host. Holds the leading text and trailing percentage indicator. Present in the descriptive pattern of the progress-bar blueprint.",
        "renderWhen": "slotFilled",
        "children": [
          {
            "name": "labelText",
            "restrict": [
              "span"
            ],
            "description": "Leading descriptive label text (e.g. 'Einstein Setup Assistant').",
            "slot": {
              "name": "labelText"
            }
          },
          {
            "name": "percentage",
            "restrict": [
              "span"
            ],
            "description": "Trailing percentage indicator; hidden from assistive tech because the value is also conveyed by aria-valuenow on the progress bar.",
            "attributes": {
              "static": {
                "aria-hidden": "true"
              }
            },
            "children": [
              {
                "name": "percentageText",
                "restrict": [
                  "strong"
                ],
                "description": "Bolded percentage value (e.g. '25% Complete').",
                "slot": {
                  "name": "percentageText"
                }
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-grid slds-grid_align-spread slds-p-bottom_x-small"
          }
        }
      },
      {
        "name": "value",
        "restrict": [
          "span"
        ],
        "description": "Fill up blue bar inside of the progress bar",
        "attributes": {
          "bound": {
            "style": {
              "prop": "widthStyle"
            }
          },
          "static": {
            "class": "slds-progress-bar__value"
          }
        },
        "children": [
          {
            "name": "assistiveText",
            "restrict": [
              "span"
            ],
            "description": "Screen reader progress text",
            "slot": {
              "name": "assistiveText"
            },
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ],
        "modifiers": [
          {
            "name": "success",
            "attribute": "class",
            "value": "slds-progress-bar__value_success",
            "description": "Create a green progress bar"
          }
        ]
      }
    ],
    "modifiers": [
      {
        "name": "circular",
        "attribute": "class",
        "value": "slds-progress-bar_circular",
        "description": "Adds a border radius to the progress bar to give it a circular look"
      },
      {
        "name": "vertical",
        "attribute": "class",
        "value": "slds-progress-bar_vertical",
        "description": "Create a vertical progress bar"
      },
      {
        "name": "size",
        "attribute": "class",
        "description": "Progress bar thickness",
        "default": "medium",
        "options": [
          {
            "propValue": "x-small",
            "value": "slds-progress-bar_x-small",
            "description": "Creates a progress bar height at the smaller .125rem (2px) size"
          },
          {
            "propValue": "small",
            "value": "slds-progress-bar_small",
            "description": "Creates a progress bar height at the smaller .25rem (4px) size"
          },
          {
            "propValue": "medium",
            "value": "slds-progress-bar_medium",
            "description": "Creates a progress bar height at the smaller .5rem (8px) size"
          },
          {
            "propValue": "large",
            "value": "slds-progress-bar_large",
            "description": "Creates a progress bar height at the smaller .75rem (12px) size"
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "complete",
      "type": "boolean",
      "description": "Whether the progress bar has reached 100%"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "progressbar-role",
        "description": "Container must have role='progressbar'"
      },
      {
        "id": "aria-values",
        "description": "Must have aria-valuemin, aria-valuemax, and aria-valuenow"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2016-06-01",
      "genReady": false,
      "lbc": "lightning-progress-bar"
    }
  },
  "cssSource": "./progressBar.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}