{
  "_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": "WelcomeMat",
  "description": "Onboarding splash that pairs an informational region with a list of actionable tiles, used to introduce users to a product area and track progress through a set of getting-started steps.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./welcomeMat.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "welcomeMat",
    "restrict": [
      "div"
    ],
    "description": "Root welcome-mat container that holds the informational region and the tiles list.",
    "attributes": {
      "static": {
        "class": "slds-welcome-mat"
      }
    },
    "variants": [
      {
        "name": "layout",
        "description": "Mutually exclusive layout treatment for the welcome mat.",
        "options": [
          {
            "value": "default",
            "class": "slds-welcome-mat",
            "description": "Default two-column welcome mat with informational region and actionable tiles."
          },
          {
            "value": "infoOnly",
            "class": "slds-welcome-mat slds-welcome-mat_info-only",
            "description": "Info-only treatment that surfaces a non-actionable informational layout alongside tiles."
          },
          {
            "value": "splash",
            "class": "slds-welcome-mat slds-welcome-mat_splash",
            "description": "Splash treatment that hides the tiles column and renders only the informational region across the full width."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "content",
        "restrict": [
          "div"
        ],
        "description": "Two-column grid wrapper that lays out the info region beside the tiles list.",
        "attributes": {
          "static": {
            "class": "slds-welcome-mat__content slds-grid"
          }
        },
        "children": [
          {
            "name": "info",
            "restrict": [
              "div"
            ],
            "description": "Informational region of the welcome mat. Focusable landmark that contains the title, description, progress, and badge.",
            "attributes": {
              "static": {
                "class": "slds-welcome-mat__info slds-size_1-of-2"
              }
            },
            "children": [
              {
                "name": "infoContent",
                "restrict": [
                  "div"
                ],
                "description": "Centered content wrapper inside the info region.",
                "attributes": {
                  "static": {
                    "class": "slds-welcome-mat__info-content"
                  }
                },
                "children": [
                  {
                    "name": "infoTitle",
                    "restrict": [
                      "h1",
                      "h2",
                      "h3"
                    ],
                    "description": "Title of the informational region. Acts as the labelled-by target for the welcome mat dialog.",
                    "attributes": {
                      "static": {
                        "class": "slds-welcome-mat__info-title"
                      }
                    }
                  },
                  {
                    "name": "infoDescription",
                    "restrict": [
                      "div",
                      "p"
                    ],
                    "description": "Long-form description rendered below the title.",
                    "attributes": {
                      "static": {
                        "class": "slds-welcome-mat__info-description slds-text-longform"
                      }
                    }
                  },
                  {
                    "name": "infoProgress",
                    "restrict": [
                      "div"
                    ],
                    "description": "Container that surfaces progress text, optional trailhead badge, and the completed indicator.",
                    "attributes": {
                      "static": {
                        "class": "slds-welcome-mat__info-progress"
                      }
                    },
                    "modifiers": [
                      {
                        "name": "complete",
                        "attribute": "class",
                        "value": "slds-welcome-mat__info-progress_complete",
                        "description": "Reveals the completed check icon on the trailhead badge when the user has finished the walkthrough."
                      }
                    ],
                    "children": [
                      {
                        "name": "infoBadgeContainer",
                        "restrict": [
                          "div"
                        ],
                        "description": "Positioning container for the trailhead progress badge and its overlaid check icon.",
                        "attributes": {
                          "static": {
                            "class": "slds-welcome-mat__info-badge-container"
                          }
                        },
                        "children": [
                          {
                            "name": "infoBadge",
                            "restrict": [
                              "img"
                            ],
                            "description": "Trailhead badge image rendered inside the badge container.",
                            "attributes": {
                              "static": {
                                "class": "slds-welcome-mat__info-badge"
                              }
                            }
                          },
                          {
                            "name": "infoBadgeCheck",
                            "restrict": [
                              "span"
                            ],
                            "description": "Circular completed-check overlay positioned on the trailhead badge.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon_container slds-icon_container_circle slds-icon-action-check"
                              }
                            },
                            "children": [
                              {
                                "name": "infoBadgeCheckIcon",
                                "restrict": [
                                  "svg"
                                ],
                                "description": "Check glyph rendered inside the badge completed indicator.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon slds-welcome-mat__icon-check slds-icon_xx-small"
                                  }
                                }
                              },
                              {
                                "name": "infoBadgeCheckAssistiveText",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Visually hidden label announcing that the trailhead badge has been earned.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-assistive-text"
                                  }
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "infoActions",
                    "restrict": [
                      "div"
                    ],
                    "description": "Container for primary action button and supplemental controls in info-only and splash treatments.",
                    "attributes": {
                      "static": {
                        "class": "slds-welcome-mat__info-actions"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "tiles",
            "restrict": [
              "ul"
            ],
            "description": "List of actionable tiles representing steps the user can complete.",
            "attributes": {
              "static": {
                "class": "slds-welcome-mat__tiles slds-size_1-of-2"
              }
            },
            "modifiers": [
              {
                "name": "infoOnly",
                "attribute": "class",
                "value": "slds-welcome-mat__tiles_info-only",
                "description": "Applies the info-only surface treatment to the tiles list when paired with the info-only layout variant."
              }
            ],
            "children": [
              {
                "name": "tile",
                "restrict": [
                  "li"
                ],
                "description": "Single welcome-mat tile representing an actionable or informational step.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-welcome-mat__tile"
                  }
                },
                "modifiers": [
                  {
                    "name": "complete",
                    "attribute": "class",
                    "value": "slds-welcome-mat__tile_complete",
                    "description": "Marks a tile as completed, removing its shadow and revealing the action-check overlay on the figure."
                  },
                  {
                    "name": "infoOnly",
                    "attribute": "class",
                    "value": "slds-welcome-mat__tile_info-only",
                    "description": "Renders the tile as non-actionable info content (no link, no body border)."
                  }
                ],
                "children": [
                  {
                    "name": "tileLink",
                    "restrict": [
                      "a",
                      "div"
                    ],
                    "description": "Tile inner wrapper that uses the SLDS box-link media-object treatment when the tile is actionable, or a plain media object for info-only tiles.",
                    "attributes": {
                      "static": {
                        "class": "slds-box slds-box_link slds-media"
                      }
                    },
                    "children": [
                      {
                        "name": "tileMediaFigure",
                        "restrict": [
                          "div"
                        ],
                        "description": "Fixed-width centered media-object figure that hosts the tile icon and optional completed indicator.",
                        "attributes": {
                          "static": {
                            "class": "slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center"
                          }
                        },
                        "children": [
                          {
                            "name": "tileFigure",
                            "restrict": [
                              "div"
                            ],
                            "description": "Inner figure container with start-side spacing for the icon container.",
                            "attributes": {
                              "static": {
                                "class": "slds-welcome-mat__tile-figure"
                              }
                            },
                            "children": [
                              {
                                "name": "tileIconContainer",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Positioning container for the primary tile icon and overlaid completed-check icon.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-welcome-mat__tile-icon-container"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "tileIcon",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Primary utility-icon container rendered inside the tile figure.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-icon_container"
                                      }
                                    },
                                    "children": [
                                      {
                                        "name": "tileIconSvg",
                                        "restrict": [
                                          "svg"
                                        ],
                                        "description": "Utility icon glyph rendered inside the tile icon container.",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-icon slds-icon-text-default"
                                          }
                                        }
                                      }
                                    ]
                                  },
                                  {
                                    "name": "tileCheck",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Circular completed-check overlay anchored to the bottom-end of the tile icon. Hidden by default; revealed by the tile complete modifier.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-icon_container slds-icon_container_circle slds-icon-action-check"
                                      }
                                    },
                                    "children": [
                                      {
                                        "name": "tileCheckIcon",
                                        "restrict": [
                                          "svg"
                                        ],
                                        "description": "Check glyph rendered inside the tile completed indicator.",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-icon slds-welcome-mat__icon-check"
                                          }
                                        }
                                      },
                                      {
                                        "name": "tileCheckAssistiveText",
                                        "restrict": [
                                          "span"
                                        ],
                                        "description": "Visually hidden label announcing that the tile step has been completed.",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-assistive-text"
                                          }
                                        }
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "tileMediaBody",
                        "restrict": [
                          "div"
                        ],
                        "description": "Media-object body wrapper that hosts the tile copy block.",
                        "attributes": {
                          "static": {
                            "class": "slds-media__body"
                          }
                        },
                        "children": [
                          {
                            "name": "tileBody",
                            "restrict": [
                              "div"
                            ],
                            "description": "Tile copy container with inline-start divider that holds the title and description.",
                            "attributes": {
                              "static": {
                                "class": "slds-welcome-mat__tile-body"
                              }
                            },
                            "children": [
                              {
                                "name": "tileTitle",
                                "restrict": [
                                  "h2",
                                  "h3",
                                  "h4"
                                ],
                                "description": "Tile heading.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-welcome-mat__tile-title"
                                  }
                                }
                              },
                              {
                                "name": "tileDescription",
                                "restrict": [
                                  "p"
                                ],
                                "description": "Short description of the tile step.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-welcome-mat__tile-description"
                                  }
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}