{
  "_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-foundation.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"
      },
      "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 containing the leading label text and a trailing percentage indicator. Rendered with the progress bar when the descriptive pattern is in use.",
        "renderWhen": "slotFilled",
        "children": [
          {
            "name": "labelText",
            "restrict": [
              "span"
            ],
            "description": "Leading descriptive label text.",
            "slot": {
              "name": "labelText"
            }
          },
          {
            "name": "percentage",
            "restrict": [
              "span"
            ],
            "description": "Trailing percentage indicator; marked aria-hidden because the value is exposed via aria-valuenow.",
            "attributes": {
              "static": {
                "aria-hidden": "true"
              }
            },
            "children": [
              {
                "name": "percentageText",
                "restrict": [
                  "strong"
                ],
                "description": "Bolded percentage value text.",
                "slot": {
                  "name": "percentageText"
                }
              }
            ]
          }
        ]
      },
      {
        "name": "value",
        "restrict": [
          "span"
        ],
        "description": "Progress bar fill",
        "attributes": {
          "bound": {
            "style": {
              "prop": "widthStyle"
            }
          }
        },
        "children": [
          {
            "name": "assistiveText",
            "restrict": [
              "span"
            ],
            "description": "Screen reader progress text",
            "slot": {
              "name": "assistiveText"
            }
          }
        ]
      }
    ]
  },
  "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"
      }
    ]
  }
}