{
  "_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": "Path",
  "description": "Horizontal stage navigator that visualizes a record's progress through a defined process, with optional coaching content for the active stage.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./path.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "path",
    "restrict": [
      "div"
    ],
    "description": "Root path container that wraps the stage track, action area, and optional coaching content.",
    "attributes": {
      "static": {
        "class": "slds-path"
      }
    },
    "modifiers": [
      {
        "name": "hasCoaching",
        "attribute": "class",
        "value": "slds-path_has-coaching",
        "description": "Indicates the path includes a coaching toggle and expandable coaching content."
      }
    ],
    "variants": [
      {
        "name": "closedState",
        "description": "Mutually exclusive closed state applied to the root, which propagates Won or Lost styling to the current stage.",
        "options": [
          {
            "value": "won",
            "class": "slds-is-won",
            "description": "Path is closed in a Won state; current stage adopts the success palette."
          },
          {
            "value": "lost",
            "class": "slds-is-lost",
            "description": "Path is closed in a Lost state; current stage adopts the error palette."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "track",
        "restrict": [
          "div"
        ],
        "description": "Horizontal track that lays out the scroller container and the action area side by side.",
        "attributes": {
          "static": {
            "class": "slds-grid slds-path__track"
          }
        },
        "modifiers": [
          {
            "name": "hasOverflow",
            "attribute": "class",
            "value": "slds-has-overflow",
            "description": "Enables horizontal scrolling of the stage list and reveals the scroll controls."
          }
        ],
        "children": [
          {
            "name": "scrollerContainer",
            "restrict": [
              "div"
            ],
            "description": "Container that holds the optional coaching trigger and the path scroller.",
            "attributes": {
              "static": {
                "class": "slds-grid slds-path__scroller-container"
              }
            },
            "children": [
              {
                "name": "trigger",
                "restrict": [
                  "button"
                ],
                "description": "Icon button that toggles the visibility of the coaching content tabpanel.",
                "renderWhen": "propFilled",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-path__trigger"
                  }
                },
                "modifiers": [
                  {
                    "name": "open",
                    "attribute": "class",
                    "value": "slds-path__trigger_open",
                    "description": "Rotates the trigger chevron to indicate the coaching content is open."
                  }
                ]
              },
              {
                "name": "scroller",
                "restrict": [
                  "div"
                ],
                "description": "Outer scroller that masks overflow of the stage list.",
                "attributes": {
                  "static": {
                    "class": "slds-path__scroller"
                  }
                },
                "children": [
                  {
                    "name": "scrollerInner",
                    "restrict": [
                      "div"
                    ],
                    "description": "Inner scroller that enables horizontal scrolling when overflow is active.",
                    "attributes": {
                      "static": {
                        "class": "slds-path__scroller_inner"
                      }
                    },
                    "children": [
                      {
                        "name": "nav",
                        "restrict": [
                          "ul"
                        ],
                        "description": "Horizontal listbox of path stages.",
                        "attributes": {
                          "static": {
                            "class": "slds-path__nav"
                          }
                        },
                        "children": [
                          {
                            "name": "item",
                            "restrict": [
                              "li"
                            ],
                            "description": "Single path stage. Carries one of the stage state classes (incomplete, complete, current, active, won, lost).",
                            "repeats": true,
                            "attributes": {
                              "static": {
                                "class": "slds-path__item"
                              }
                            },
                            "variants": [
                              {
                                "name": "stage",
                                "description": "Mutually exclusive stage state applied to the path item.",
                                "options": [
                                  {
                                    "value": "incomplete",
                                    "class": "slds-is-incomplete",
                                    "description": "Stage has not yet been started."
                                  },
                                  {
                                    "value": "complete",
                                    "class": "slds-is-complete",
                                    "description": "Stage has been completed."
                                  },
                                  {
                                    "value": "current",
                                    "class": "slds-is-current",
                                    "description": "Stage is the current stage of the record (not necessarily focused)."
                                  },
                                  {
                                    "value": "currentActive",
                                    "class": "slds-is-current slds-is-active",
                                    "description": "Stage is both the current stage and the actively selected/focused stage."
                                  },
                                  {
                                    "value": "active",
                                    "class": "slds-is-active",
                                    "description": "Stage is the actively selected/focused stage."
                                  },
                                  {
                                    "value": "wonCurrent",
                                    "class": "slds-is-won slds-is-active slds-is-current",
                                    "description": "Stage is the closed-won terminal stage."
                                  },
                                  {
                                    "value": "lostCurrent",
                                    "class": "slds-is-lost slds-is-active slds-is-current",
                                    "description": "Stage is the closed-lost terminal stage."
                                  }
                                ]
                              }
                            ],
                            "children": [
                              {
                                "name": "link",
                                "restrict": [
                                  "a"
                                ],
                                "description": "Actionable element inside each stage. Acts as a listbox option.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-path__link"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "stage",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Stage badge containing the check icon and assistive text for the stage state.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-path__stage"
                                      }
                                    },
                                    "children": [
                                      {
                                        "name": "stageIcon",
                                        "restrict": [
                                          "svg"
                                        ],
                                        "description": "Check icon rendered inside the stage badge.",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-icon slds-icon_x-small"
                                          }
                                        }
                                      },
                                      {
                                        "name": "stageAssistiveText",
                                        "restrict": [
                                          "span"
                                        ],
                                        "description": "Assistive text describing the stage state (e.g., Stage Complete, Current Stage:).",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-assistive-text"
                                          }
                                        }
                                      }
                                    ]
                                  },
                                  {
                                    "name": "title",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Visible stage name shown on the link.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-path__title"
                                      }
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "scrollControls",
                        "restrict": [
                          "div"
                        ],
                        "description": "Container for the left/right scroll buttons used when the stage list overflows.",
                        "attributes": {
                          "static": {
                            "class": "slds-path__scroll-controls"
                          }
                        },
                        "children": [
                          {
                            "name": "scrollButton",
                            "restrict": [
                              "button"
                            ],
                            "description": "Icon button that scrolls the stage list left or right.",
                            "repeats": true,
                            "attributes": {
                              "static": {
                                "class": "slds-button slds-button_icon slds-button_icon-border-filled"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "action",
            "restrict": [
              "div"
            ],
            "description": "Action region beside the stage track, containing the stage name and primary path actions.",
            "attributes": {
              "static": {
                "class": "slds-grid slds-path__action"
              }
            },
            "children": [
              {
                "name": "stageName",
                "restrict": [
                  "span"
                ],
                "description": "Stage name label shown in compressed layouts and used to label the listbox.",
                "attributes": {
                  "static": {
                    "class": "slds-path__stage-name"
                  }
                }
              },
              {
                "name": "markComplete",
                "restrict": [
                  "button"
                ],
                "description": "Primary brand button that advances the path (e.g., Mark Status as Complete).",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_brand slds-path__mark-complete"
                  }
                }
              },
              {
                "name": "markCurrent",
                "restrict": [
                  "button"
                ],
                "description": "Secondary button that sets a non-current stage as the current stage.",
                "renderWhen": "propFilled",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-path__mark-current"
                  }
                }
              },
              {
                "name": "triggerCoachingContent",
                "restrict": [
                  "button"
                ],
                "description": "Full-width coaching toggle shown in small regions when the trigger icon is hidden.",
                "renderWhen": "propFilled",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_neutral slds-path__trigger-coaching-content"
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "name": "content",
        "restrict": [
          "div"
        ],
        "description": "Coaching tabpanel that holds the key-fields and guidance subsections for the current stage.",
        "attributes": {
          "static": {
            "class": "slds-path__content"
          }
        },
        "modifiers": [
          {
            "name": "collapsed",
            "attribute": "class",
            "value": "slds-is-collapsed",
            "description": "Hides the coaching content when the trigger is collapsed."
          }
        ],
        "children": [
          {
            "name": "coach",
            "restrict": [
              "div"
            ],
            "description": "Two-column coaching layout containing the keys and guidance regions.",
            "attributes": {
              "static": {
                "class": "slds-path__coach slds-grid"
              }
            },
            "children": [
              {
                "name": "keys",
                "restrict": [
                  "div"
                ],
                "description": "Key Fields region inside the coaching content.",
                "attributes": {
                  "static": {
                    "class": "slds-path__keys"
                  }
                },
                "children": [
                  {
                    "name": "keysTitle",
                    "restrict": [
                      "div"
                    ],
                    "description": "Title row for the Key Fields region; lays out the heading and an inline Edit button.",
                    "attributes": {
                      "static": {
                        "class": "slds-grid slds-grid_align-spread slds-path__coach-title"
                      }
                    },
                    "children": [
                      {
                        "name": "coachEdit",
                        "restrict": [
                          "button"
                        ],
                        "description": "Edit button placed in the coaching title row.",
                        "renderWhen": "propFilled",
                        "attributes": {
                          "static": {
                            "class": "slds-button slds-path__coach-edit slds-text-body_small"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "guidance",
                "restrict": [
                  "div"
                ],
                "description": "Guidance for Success region inside the coaching content.",
                "attributes": {
                  "static": {
                    "class": "slds-path__guidance"
                  }
                },
                "children": [
                  {
                    "name": "guidanceTitle",
                    "restrict": [
                      "h2"
                    ],
                    "description": "Heading for the Guidance region.",
                    "attributes": {
                      "static": {
                        "class": "slds-path__coach-title"
                      }
                    }
                  },
                  {
                    "name": "guidanceContent",
                    "restrict": [
                      "div"
                    ],
                    "description": "Long-form body content for the Guidance region.",
                    "attributes": {
                      "static": {
                        "class": "slds-text-longform slds-path__guidance-content"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "expanded",
      "class": "slds-is-expanded"
    },
    {
      "state": "collapsed",
      "class": "slds-is-collapsed"
    }
  ],
  "states": [
    {
      "name": "expanded",
      "type": "boolean",
      "description": "Whether the component is in the expanded state"
    },
    {
      "name": "collapsed",
      "type": "boolean",
      "description": "Whether the component is in the collapsed state"
    }
  ]
}