{
  "_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": "BuilderHeader",
  "description": "Fixed-position global header used by Salesforce builders. Combines a primary header bar with back, app name, navigation menu, page-type label, and utility links, plus an optional toolbar row for canvas, edit, and document actions.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./builderHeader.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "container",
    "restrict": [
      "div"
    ],
    "description": "Fixed-position wrapper that pins the builder header to the top of the viewport and stacks the header bar above an optional toolbar.",
    "attributes": {
      "static": {
        "class": "slds-builder-header_container"
      }
    },
    "children": [
      {
        "name": "header",
        "restrict": [
          "header"
        ],
        "description": "Primary builder header bar containing app identity, navigation, page-type label, and utility links.",
        "attributes": {
          "static": {
            "class": "slds-builder-header"
          }
        },
        "children": [
          {
            "name": "backItem",
            "restrict": [
              "div"
            ],
            "description": "Left-most header item that holds the back-navigation icon link.",
            "attributes": {
              "static": {
                "class": "slds-builder-header__item"
              }
            },
            "children": [
              {
                "name": "backAction",
                "restrict": [
                  "a",
                  "button"
                ],
                "description": "Back-navigation action rendered as an icon-only link.",
                "attributes": {
                  "static": {
                    "class": "slds-builder-header__item-action"
                  }
                },
                "children": [
                  {
                    "name": "backIconContainer",
                    "restrict": [
                      "span"
                    ],
                    "description": "Icon container wrapping the back utility glyph and assistive text.",
                    "attributes": {
                      "static": {
                        "class": "slds-icon_container slds-current-color"
                      }
                    },
                    "children": [
                      {
                        "name": "backIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Back utility icon glyph.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_x-small"
                          }
                        }
                      },
                      {
                        "name": "backAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden label announcing the back action.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "appNameItem",
            "restrict": [
              "div"
            ],
            "description": "Header item that displays the builder's app identity (icon plus app name).",
            "attributes": {
              "static": {
                "class": "slds-builder-header__item"
              }
            },
            "children": [
              {
                "name": "appNameLabel",
                "restrict": [
                  "div"
                ],
                "description": "Media-aligned label inside the app-name item that pairs an icon with the app name text.",
                "attributes": {
                  "static": {
                    "class": "slds-builder-header__item-label slds-media slds-media_center"
                  }
                },
                "children": [
                  {
                    "name": "appNameFigure",
                    "restrict": [
                      "div"
                    ],
                    "description": "Media figure holding the app identity icon.",
                    "attributes": {
                      "static": {
                        "class": "slds-media__figure"
                      }
                    },
                    "children": [
                      {
                        "name": "appNameIconContainer",
                        "restrict": [
                          "span"
                        ],
                        "description": "Icon container wrapping the builder identity glyph.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon_container slds-current-color"
                          }
                        },
                        "children": [
                          {
                            "name": "appNameIcon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Builder identity icon glyph.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_x-small"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "appNameBody",
                    "restrict": [
                      "div"
                    ],
                    "description": "Media body holding the app name text.",
                    "attributes": {
                      "static": {
                        "class": "slds-media__body"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "nav",
            "restrict": [
              "nav"
            ],
            "description": "Navigation region of the builder header, hosting a list of nav items (typically dropdown triggers).",
            "attributes": {
              "static": {
                "class": "slds-builder-header__item slds-builder-header__nav"
              }
            },
            "children": [
              {
                "name": "navList",
                "restrict": [
                  "ul"
                ],
                "description": "List containing the navigation items.",
                "attributes": {
                  "static": {
                    "class": "slds-builder-header__nav-list"
                  }
                },
                "children": [
                  {
                    "name": "navItem",
                    "restrict": [
                      "li"
                    ],
                    "description": "Navigation list item, rendered as a click-triggered dropdown.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click"
                      }
                    },
                    "children": [
                      {
                        "name": "navTrigger",
                        "restrict": [
                          "button"
                        ],
                        "description": "Dropdown trigger button rendered with the SLDS button base and media layout.",
                        "attributes": {
                          "static": {
                            "class": "slds-button slds-builder-header__item-action slds-media slds-media_center"
                          }
                        },
                        "children": [
                          {
                            "name": "navTriggerFigure",
                            "restrict": [
                              "span"
                            ],
                            "description": "Media figure holding the nav trigger's leading icon.",
                            "attributes": {
                              "static": {
                                "class": "slds-media__figure"
                              }
                            },
                            "children": [
                              {
                                "name": "navTriggerLeadingIconContainer",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Icon container for the trigger's leading glyph.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon_container slds-current-color"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "navTriggerLeadingIcon",
                                    "restrict": [
                                      "svg"
                                    ],
                                    "description": "Leading icon glyph (e.g., page).",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-icon slds-icon_x-small"
                                      }
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "name": "navTriggerBody",
                            "restrict": [
                              "span"
                            ],
                            "description": "Media body holding the trigger label and the trailing chevron.",
                            "attributes": {
                              "static": {
                                "class": "slds-media__body"
                              }
                            },
                            "children": [
                              {
                                "name": "navTriggerLabel",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Trigger label, truncated when overflowing.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-truncate"
                                  }
                                }
                              },
                              {
                                "name": "navTriggerChevronContainer",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Icon container wrapping the trailing chevron glyph.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon_container slds-current-color slds-m-left_small"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "navTriggerChevron",
                                    "restrict": [
                                      "svg"
                                    ],
                                    "description": "Chevron-down glyph indicating the dropdown control.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-icon slds-icon_x-small"
                                      }
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "pageTypeItem",
            "restrict": [
              "div"
            ],
            "description": "Header item carrying the page-type label; flexes to take remaining inline space and truncates overflow.",
            "attributes": {
              "static": {
                "class": "slds-builder-header__item slds-has-flexi-truncate"
              }
            },
            "children": [
              {
                "name": "pageTypeLabel",
                "restrict": [
                  "h1",
                  "h2"
                ],
                "description": "Page-type heading rendered inside the flexi-truncate item.",
                "attributes": {
                  "static": {
                    "class": "slds-builder-header__item-label"
                  }
                },
                "children": [
                  {
                    "name": "pageTypeText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Truncating text node holding the page-type string.",
                    "attributes": {
                      "static": {
                        "class": "slds-truncate"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "utilities",
            "restrict": [
              "div"
            ],
            "description": "Trailing region containing utility actions (e.g., settings, help).",
            "attributes": {
              "static": {
                "class": "slds-builder-header__item slds-builder-header__utilities"
              }
            },
            "children": [
              {
                "name": "utilitiesItem",
                "restrict": [
                  "div"
                ],
                "description": "Single utility item, rendered as a media-aligned link with an icon and label.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-builder-header__utilities-item"
                  }
                },
                "children": [
                  {
                    "name": "utilitiesAction",
                    "restrict": [
                      "a",
                      "button"
                    ],
                    "description": "Utility action element using the media layout to align icon and label.",
                    "attributes": {
                      "static": {
                        "class": "slds-builder-header__item-action slds-media slds-media_center"
                      }
                    },
                    "children": [
                      {
                        "name": "utilitiesFigure",
                        "restrict": [
                          "span",
                          "div"
                        ],
                        "description": "Media figure containing the utility action's icon.",
                        "attributes": {
                          "static": {
                            "class": "slds-media__figure"
                          }
                        },
                        "children": [
                          {
                            "name": "utilitiesIconContainer",
                            "restrict": [
                              "span"
                            ],
                            "description": "Icon container wrapping the utility glyph.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon_container slds-current-color"
                              }
                            },
                            "children": [
                              {
                                "name": "utilitiesIcon",
                                "restrict": [
                                  "svg"
                                ],
                                "description": "Utility icon glyph (e.g., settings, help).",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon slds-icon_x-small"
                                  }
                                }
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "utilitiesBody",
                        "restrict": [
                          "span",
                          "div"
                        ],
                        "description": "Media body containing the utility action's label.",
                        "attributes": {
                          "static": {
                            "class": "slds-media__body"
                          }
                        },
                        "children": [
                          {
                            "name": "utilitiesLabel",
                            "restrict": [
                              "span"
                            ],
                            "description": "Truncating text node holding the utility label.",
                            "attributes": {
                              "static": {
                                "class": "slds-truncate"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "toolbar",
        "restrict": [
          "div"
        ],
        "description": "Optional secondary toolbar row hosting canvas actions, edit actions, and document-level primary actions.",
        "attributes": {
          "static": {
            "class": "slds-builder-toolbar",
            "role": "toolbar"
          }
        },
        "children": [
          {
            "name": "toolbarItemGroup",
            "restrict": [
              "div"
            ],
            "description": "Logical group of related toolbar buttons (e.g., canvas actions, edit actions).",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-builder-toolbar__item-group"
              }
            },
            "children": [
              {
                "name": "toolbarIconButton",
                "restrict": [
                  "button"
                ],
                "description": "Bordered icon button inside a toolbar group.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon slds-button_icon-border"
                  }
                },
                "children": [
                  {
                    "name": "toolbarIconButtonIcon",
                    "description": "Icon glyph rendered inside the toolbar button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon"
                      }
                    },
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "toolbarIconButtonAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label announcing the button's action.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ]
              },
              {
                "name": "toolbarButtonGroup",
                "restrict": [
                  "div"
                ],
                "description": "Grouped set of adjacent icon buttons sharing a single visual segmented control.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-button-group"
                  }
                },
                "children": [
                  {
                    "name": "toolbarButtonGroupButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Bordered icon button inside a button group.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_icon slds-button_icon-border"
                      }
                    },
                    "children": [
                      {
                        "name": "toolbarButtonGroupIcon",
                        "description": "Icon glyph rendered inside the grouped button.",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon"
                          }
                        },
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "toolbarButtonGroupAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden label announcing the grouped button's action.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "toolbarActions",
            "restrict": [
              "div"
            ],
            "description": "Trailing region of the toolbar reserved for document-level primary actions (e.g., Run, Save As, Save) and optional status text.",
            "attributes": {
              "static": {
                "class": "slds-builder-toolbar__actions"
              }
            },
            "children": [
              {
                "name": "statusText",
                "restrict": [
                  "button"
                ],
                "description": "Inline status indicator (e.g., 'Inactive - Modified 1 day ago'); rendered as a button styled as text with horizontal padding.",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-p-horizontal_small"
                  }
                }
              },
              {
                "name": "statusIndicatorButton",
                "restrict": [
                  "button"
                ],
                "description": "Container icon button used to surface warning or error status next to the status text.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon slds-button_icon-container"
                  }
                },
                "variants": [
                  {
                    "name": "severity",
                    "description": "Severity treatment applied to the status indicator icon button.",
                    "options": [
                      {
                        "value": "warning",
                        "class": "slds-button_icon-warning",
                        "description": "Warning severity treatment."
                      },
                      {
                        "value": "error",
                        "class": "slds-button_icon-error",
                        "description": "Error severity treatment."
                      }
                    ]
                  }
                ],
                "children": [
                  {
                    "name": "statusIndicatorIcon",
                    "description": "Icon glyph rendered inside the status indicator button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon"
                      }
                    },
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "statusIndicatorAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label describing the status severity.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ]
              },
              {
                "name": "documentAction",
                "restrict": [
                  "button"
                ],
                "description": "Document-level primary action button (e.g., Run, Save As, Save). Render once per action.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-button"
                  }
                },
                "variants": [
                  {
                    "name": "emphasis",
                    "description": "Visual emphasis applied to the document action.",
                    "options": [
                      {
                        "value": "neutral",
                        "class": "slds-button_neutral",
                        "description": "Neutral secondary emphasis."
                      },
                      {
                        "value": "brand",
                        "class": "slds-button_brand",
                        "description": "Brand primary emphasis."
                      }
                    ]
                  }
                ],
                "children": [
                  {
                    "name": "documentActionLeadingIcon",
                    "description": "Optional leading icon rendered inside the document action button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon slds-button__icon_left"
                      }
                    },
                    "component": "PrimitiveIcon"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "hasFlexiTruncate",
      "class": "slds-has-flexi-truncate"
    }
  ],
  "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"
        }
      }
    }
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    },
    {
      "name": "hasFlexiTruncate",
      "type": "boolean",
      "description": "Whether the component is in the hasFlexiTruncate state"
    }
  ]
}