{
  "_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": "TrialBar",
  "description": "Inverse-themed horizontal bar pinned above an org's primary navigation that surfaces trial messaging, a tour entry point with a dropdown of tour topics, the days-left counter, and a subscribe call-to-action.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./trialBar.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "trialBar",
    "restrict": [
      "div",
      "header"
    ],
    "description": "Root trial header container. Combines the trial-header surface with the grid layout utility so its two clusters can be laid out horizontally.",
    "attributes": {
      "static": {
        "class": "slds-trial-header slds-grid"
      }
    },
    "children": [
      {
        "name": "primaryCluster",
        "restrict": [
          "div"
        ],
        "description": "Inline-start cluster grouping the primary tour CTA and the tour-selector dropdown trigger.",
        "attributes": {
          "static": {
            "class": "slds-grid"
          }
        },
        "children": [
          {
            "name": "tourButton",
            "restrict": [
              "button"
            ],
            "description": "Primary entry-point button that launches the Salesforce tour.",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_inverse"
              }
            }
          },
          {
            "name": "tourDropdownTrigger",
            "restrict": [
              "div"
            ],
            "description": "Click-activated dropdown trigger that opens the tour-selector menu.",
            "attributes": {
              "static": {
                "class": "slds-grid slds-dropdown-trigger slds-dropdown-trigger_click"
              }
            },
            "children": [
              {
                "name": "tourMenuButton",
                "restrict": [
                  "button"
                ],
                "description": "Button that toggles the tour-selector dropdown. Carries the leading icon and label.",
                "attributes": {
                  "static": {
                    "class": "slds-button"
                  }
                },
                "children": [
                  {
                    "name": "tourMenuButtonIcon",
                    "description": "Leading glyph inside the tour menu button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon slds-button__icon_left"
                      }
                    },
                    "component": "PrimitiveIcon"
                  }
                ]
              },
              {
                "name": "tourDropdown",
                "restrict": [
                  "div"
                ],
                "description": "Dropdown surface anchored to the inline-start edge of the trigger, rendered with the inverse theme so it reads against the dark trial-header background.",
                "attributes": {
                  "static": {
                    "class": "slds-dropdown slds-dropdown_inverse slds-dropdown_left"
                  }
                },
                "children": [
                  {
                    "name": "tourDropdownList",
                    "restrict": [
                      "ul"
                    ],
                    "description": "Menu list of tour topics.",
                    "attributes": {
                      "static": {
                        "class": "slds-dropdown__list"
                      }
                    },
                    "children": [
                      {
                        "name": "tourDropdownItem",
                        "restrict": [
                          "li"
                        ],
                        "description": "Single tour-topic menu item. Repeats for each tour entry.",
                        "repeats": true,
                        "attributes": {
                          "static": {
                            "class": "slds-dropdown__item"
                          }
                        },
                        "children": [
                          {
                            "name": "tourDropdownItemLink",
                            "restrict": [
                              "a"
                            ],
                            "description": "Anchor target for the menu item.",
                            "children": [
                              {
                                "name": "tourDropdownItemText",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Truncating label wrapper for the menu item.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-truncate"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "tourDropdownItemIcon",
                                    "restrict": [
                                      "svg"
                                    ],
                                    "description": "Leading utility icon for the menu item (selected check, upload glyph, etc.).",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-icon slds-icon_x-small slds-m-right_x-small"
                                      }
                                    },
                                    "modifiers": [
                                      {
                                        "name": "selected",
                                        "attribute": "class",
                                        "value": "slds-icon_selected",
                                        "description": "Marks the icon as the selected/completed state."
                                      }
                                    ]
                                  },
                                  {
                                    "name": "tourDropdownItemAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Visually hidden prefix announcing the completed state of the topic.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-assistive-text"
                                      }
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "tourDropdownSeparator",
                        "restrict": [
                          "li"
                        ],
                        "description": "Visual divider between groups of tour topics.",
                        "attributes": {
                          "static": {
                            "class": "slds-has-divider_top-space"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "secondaryCluster",
        "restrict": [
          "div"
        ],
        "description": "Inline-end cluster (pushed to the end via col-bump) grouping the days-left badge, supporting copy, and subscribe call-to-action.",
        "attributes": {
          "static": {
            "class": "slds-grid slds-grid_vertical-align-center slds-col_bump-left"
          }
        },
        "children": [
          {
            "name": "daysLeftBadge",
            "restrict": [
              "span"
            ],
            "description": "Compact themed box displaying the numeric count of days left in the trial.",
            "attributes": {
              "static": {
                "class": "slds-box slds-box_xx-small slds-theme_default"
              }
            }
          },
          {
            "name": "daysLeftLabel",
            "restrict": [
              "span"
            ],
            "description": "Inline label describing what the days-left badge represents.",
            "attributes": {
              "static": {
                "class": "slds-m-horizontal_x-small"
              }
            }
          },
          {
            "name": "subscribeCta",
            "restrict": [
              "a",
              "button"
            ],
            "description": "Success-styled subscribe call-to-action that converts the trial.",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_success"
              }
            }
          }
        ]
      }
    ]
  },
  "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"
        }
      }
    }
  }
}