{
  "_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": "ProgressRing",
  "description": "Progress Ring component",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Progress ring container",
    "children": [
      {
        "name": "progress",
        "restrict": [
          "div"
        ],
        "description": "Progress indicator",
        "attributes": {
          "static": {
            "role": "progressbar",
            "class": "slds-progress-ring__progress"
          },
          "bound": {
            "aria-valuemin": {
              "prop": "min"
            },
            "aria-valuemax": {
              "prop": "max"
            },
            "aria-valuenow": {
              "prop": "value"
            },
            "aria-label": {
              "prop": "label"
            }
          }
        },
        "children": [
          {
            "name": "progressSvg",
            "restrict": [
              "svg"
            ],
            "description": "SVG canvas for the progress arc",
            "attributes": {
              "static": {
                "viewBox": "-1 -1 2 2"
              }
            }
          },
          {
            "name": "progressPath",
            "restrict": [
              "circle",
              "path"
            ],
            "description": "Filled arc representing current progress (circle when full, path otherwise)",
            "attributes": {
              "static": {
                "class": "slds-progress-ring__path"
              }
            }
          }
        ]
      },
      {
        "name": "content",
        "restrict": [
          "div"
        ],
        "description": "Progress ring content area",
        "slot": {
          "name": "default"
        },
        "children": [
          {
            "name": "statusIcon",
            "restrict": [
              "span"
            ],
            "description": "Optional status icon container shown for complete/warning/expired states",
            "children": [
              {
                "name": "statusIconSvg",
                "restrict": [
                  "svg"
                ],
                "description": "Icon SVG canvas",
                "attributes": {
                  "static": {
                    "aria-hidden": "true",
                    "class": "slds-icon"
                  }
                }
              },
              {
                "name": "statusIconUse",
                "restrict": [
                  "use"
                ],
                "description": "SVG sprite reference for the status icon symbol"
              },
              {
                "name": "statusIconLabel",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text describing the status icon meaning",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "renderWhen": "propFilled",
            "attributes": {
              "static": {
                "class": "slds-icon_container"
              }
            },
            "variants": [
              {
                "name": "status",
                "description": "Utility icon class derived from the status variant",
                "options": [
                  {
                    "value": "complete",
                    "class": "slds-icon-utility-check",
                    "description": "Check icon shown for completed state"
                  },
                  {
                    "value": "warning",
                    "class": "slds-icon-utility-warning",
                    "description": "Warning icon shown for warning state"
                  },
                  {
                    "value": "expired",
                    "class": "slds-icon-utility-error",
                    "description": "Error icon shown for expired state"
                  }
                ]
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-progress-ring__content"
          }
        }
      },
      {
        "name": "progressHead",
        "restrict": [
          "div"
        ],
        "description": "Animated marker positioned at the leading edge of the ring",
        "children": [
          {
            "name": "progressHeadSvg",
            "restrict": [
              "svg"
            ],
            "description": "SVG canvas for the progress head marker",
            "attributes": {
              "static": {
                "viewBox": "-1 -1 2 2"
              }
            }
          },
          {
            "name": "progressHeadDot",
            "restrict": [
              "circle"
            ],
            "description": "The dot at the leading edge of the ring",
            "attributes": {
              "static": {
                "class": "slds-progress-ring__path"
              }
            }
          }
        ],
        "renderWhen": {
          "prop": "progress",
          "eq": "partial"
        },
        "attributes": {
          "static": {
            "class": "slds-progress-ring__progress-head"
          }
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-progress-ring"
      }
    },
    "modifiers": [
      {
        "name": "size",
        "attribute": "class",
        "description": "Ring size",
        "default": "medium",
        "options": [
          {
            "propValue": "medium",
            "value": ""
          },
          {
            "propValue": "large",
            "value": "slds-progress-ring_large",
            "description": "Larger ring size"
          }
        ]
      }
    ],
    "variants": [
      {
        "name": "status",
        "description": "Progress status indicating semantic meaning",
        "default": "active",
        "options": [
          {
            "value": "active",
            "class": "",
            "description": "Active progress state"
          },
          {
            "value": "active-step",
            "class": "slds-progress-ring_active-step",
            "description": "Blue progress ring"
          },
          {
            "value": "warning",
            "class": "slds-progress-ring_warning",
            "description": "Warning colors"
          },
          {
            "value": "expired",
            "class": "slds-progress-ring_expired",
            "description": "Expired colors"
          },
          {
            "value": "complete",
            "class": "slds-progress-ring_complete",
            "description": "Complete colors"
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "status",
      "type": "enum",
      "options": [
        "active",
        "complete",
        "warning",
        "expired",
        "error"
      ],
      "description": "Current status of the progress ring"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "progressbar-role",
        "description": "The progress node must have role='progressbar' with aria-valuemin, aria-valuemax, and aria-valuenow set."
      },
      {
        "id": "progressbar-label",
        "description": "The progress node must carry an accessible name via aria-label (or aria-labelledby) describing what the ring is tracking."
      },
      {
        "id": "status-icon-text-alternative",
        "description": "When a status icon is rendered inside content, the decorative SVG must be aria-hidden='true' and an accessible name must be provided via slds-assistive-text."
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2018-03-01",
      "genReady": false,
      "lbc": "lightning-progress-ring"
    }
  },
  "cssSource": "./progressRing.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}