{
  "_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-foundation.v1.json",
  "apiVersion": "1.0.0",
  "name": "Tile",
  "description": "Initializes tile",
  "structure": {
    "name": "root",
    "restrict": [
      "article",
      "div"
    ],
    "description": "Initializes tile",
    "children": [
      {
        "name": "media",
        "restrict": [
          "div"
        ],
        "description": "Media/figure area (icon, avatar, or task checkbox). Only present when the tile uses the media layout.",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "media",
          "restrict": [
            "Icon",
            "Avatar",
            "Checkbox"
          ]
        },
        "children": [
          {
            "name": "mediaIconContainer",
            "restrict": [
              "span"
            ],
            "description": "Sprite icon container when the figure holds an icon",
            "renderWhen": {
              "prop": "figureType",
              "eq": "icon"
            },
            "children": [
              {
                "name": "mediaIconSvg",
                "description": "Icon glyph svg",
                "component": "PrimitiveIcon"
              }
            ]
          },
          {
            "name": "mediaAvatar",
            "restrict": [
              "span"
            ],
            "description": "Avatar container when the figure holds an avatar image",
            "renderWhen": {
              "prop": "figureType",
              "eq": "avatar"
            },
            "children": [
              {
                "name": "mediaAvatarImage",
                "restrict": [
                  "img"
                ],
                "description": "Avatar image element"
              }
            ]
          },
          {
            "name": "mediaCheckbox",
            "restrict": [
              "div"
            ],
            "description": "Checkbox group container when the figure holds a task checkbox",
            "renderWhen": {
              "prop": "figureType",
              "eq": "checkbox"
            },
            "children": [
              {
                "name": "mediaCheckboxInput",
                "restrict": [
                  "input"
                ],
                "description": "Checkbox input element"
              },
              {
                "name": "mediaCheckboxLabel",
                "restrict": [
                  "label"
                ],
                "description": "Checkbox label wrapping the faux box and the descriptive label text",
                "children": [
                  {
                    "name": "mediaCheckboxFaux",
                    "restrict": [
                      "span"
                    ],
                    "description": "Faux checkbox graphic"
                  },
                  {
                    "name": "mediaCheckboxLabelText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Descriptive label text (assistive-text permitted)"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "body",
        "restrict": [
          "div"
        ],
        "description": "Tile body wrapping the title and detail. May be omitted in compact layouts where the title and detail sit directly inside the tile root.",
        "children": [
          {
            "name": "bodyGrid",
            "restrict": [
              "div"
            ],
            "description": "Inner grid wrapping the title and the tile actions on a single row",
            "renderWhen": {
              "prop": "hasActions",
              "eq": "true"
            },
            "children": [
              {
                "name": "title",
                "restrict": [
                  "h3"
                ],
                "description": "Tile title",
                "slot": {
                  "name": "title",
                  "required": true
                },
                "children": [
                  {
                    "name": "titleLink",
                    "restrict": [
                      "a"
                    ],
                    "description": "Linked tile title text"
                  }
                ]
              },
              {
                "name": "actions",
                "restrict": [
                  "div"
                ],
                "description": "Tile action button area",
                "renderWhen": "slotFilled",
                "slot": {
                  "name": "actions"
                },
                "children": [
                  {
                    "name": "actionButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Tile-level overflow action button",
                    "children": [
                      {
                        "name": "actionButtonIcon",
                        "description": "Action button icon svg",
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "actionButtonAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Assistive text describing the action"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "detail",
            "restrict": [
              "div"
            ],
            "description": "Tile detail content (description list, paragraphs, meta lists, board alert)",
            "slot": {
              "name": "default"
            },
            "children": [
              {
                "name": "detailList",
                "restrict": [
                  "dl"
                ],
                "description": "Horizontal description list of label/value pairs",
                "children": [
                  {
                    "name": "detailLabel",
                    "restrict": [
                      "dt"
                    ],
                    "description": "Description term (label)",
                    "repeats": true
                  },
                  {
                    "name": "detailValue",
                    "restrict": [
                      "dd"
                    ],
                    "description": "Description detail (value)",
                    "repeats": true
                  }
                ]
              },
              {
                "name": "detailParagraph",
                "restrict": [
                  "p"
                ],
                "description": "Detail paragraph (assignee, headline lede, board amount, or follow-up text)",
                "repeats": true
              },
              {
                "name": "detailMetaList",
                "restrict": [
                  "ul"
                ],
                "description": "Inline horizontal meta list (status, category, timestamp, vote actions)",
                "repeats": true,
                "children": [
                  {
                    "name": "detailMetaItem",
                    "restrict": [
                      "li"
                    ],
                    "description": "Meta-list item",
                    "repeats": true,
                    "children": [
                      {
                        "name": "detailMetaItemAction",
                        "restrict": [
                          "button"
                        ],
                        "description": "Optional vote/like icon button rendered inside a meta item",
                        "children": [
                          {
                            "name": "detailMetaItemActionIcon",
                            "description": "Vote icon svg",
                            "component": "PrimitiveIcon"
                          },
                          {
                            "name": "detailMetaItemActionAssistiveText",
                            "restrict": [
                              "span"
                            ],
                            "description": "Assistive text describing the vote action"
                          }
                        ]
                      },
                      {
                        "name": "detailMetaItemCount",
                        "restrict": [
                          "span"
                        ],
                        "description": "Inline count rendered alongside a vote action"
                      }
                    ]
                  }
                ]
              },
              {
                "name": "detailAlertIconContainer",
                "restrict": [
                  "span"
                ],
                "description": "Warning icon container shown in board-style tiles when an alert is present",
                "renderWhen": {
                  "prop": "hasAlert",
                  "eq": "true"
                },
                "children": [
                  {
                    "name": "detailAlertIconSvg",
                    "description": "Warning glyph svg",
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "detailAlertIconAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Assistive text describing the warning icon"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "hasAlert",
      "type": "boolean",
      "description": "Whether the board tile is flagged with a warning alert"
    },
    {
      "name": "hintParent",
      "type": "boolean",
      "description": "Whether the tile reveals its actions only on hover/focus"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "semantic-heading",
        "description": "Title should use an appropriate heading level for the document outline"
      },
      {
        "id": "action-button-label",
        "description": "Tile-level action buttons must carry an accessible name (visible label or assistive text)"
      },
      {
        "id": "decorative-icon-hidden",
        "description": "Decorative svgs inside the tile must set aria-hidden=true"
      },
      {
        "id": "task-checkbox-label",
        "description": "Task-style tile checkboxes must associate the label with the input and provide a descriptive label (assistive-text permitted)"
      }
    ]
  },
  "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"
        }
      }
    }
  }
}