{
  "_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": "VisualPicker",
  "description": "Selectable input control rendered as a visual card. Pairs a hidden radio or checkbox with a label whose figure either swaps between selected and not-selected icons (coverable content) or contains supporting text with a corner check indicator (non-coverable content).",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./visualPicker.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "visualPicker",
    "restrict": [
      "div"
    ],
    "description": "Root visual picker container that wraps the hidden input and its visual label.",
    "attributes": {
      "static": {
        "class": "slds-visual-picker"
      }
    },
    "variants": [
      {
        "name": "size",
        "description": "Size and orientation modifier applied to the root. Mutually exclusive; vertical implies the wide vertical layout regardless of size.",
        "default": "medium",
        "options": [
          {
            "value": "small",
            "class": "slds-visual-picker_small",
            "description": "Small square figure (~5rem)."
          },
          {
            "value": "medium",
            "class": "slds-visual-picker_medium",
            "description": "Default medium square figure."
          },
          {
            "value": "large",
            "class": "slds-visual-picker_large",
            "description": "Large square figure."
          },
          {
            "value": "vertical",
            "class": "slds-visual-picker_vertical",
            "description": "Wide rectangular figure that flows vertically, sized for text-heavy options."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "input",
        "restrict": [
          "input"
        ],
        "description": "Visually hidden radio or checkbox input that drives the picker's selection state.",
        "attributes": {
          "static": {}
        }
      },
      {
        "name": "label",
        "restrict": [
          "label"
        ],
        "description": "Clickable label tied to the input via for/id. Contains the visual figure and optional supporting body content.",
        "attributes": {
          "static": {}
        },
        "children": [
          {
            "name": "figure",
            "restrict": [
              "span"
            ],
            "description": "Visual container that holds either the icon swap (coverable) or the heading/price text block (non-coverable). One of the figure variants must be applied.",
            "attributes": {
              "static": {
                "class": "slds-visual-picker__figure slds-align_absolute-center"
              }
            },
            "variants": [
              {
                "name": "content",
                "description": "Figure content treatment.",
                "options": [
                  {
                    "value": "icon",
                    "class": "slds-visual-picker__icon",
                    "description": "Coverable content. The figure renders a pair of icons that toggle between not-selected and selected via the checked state.",
                    "children": [
                      {
                        "name": "selectedIcon",
                        "restrict": [
                          "span"
                        ],
                        "description": "Wrapper shown when the input is checked. Contains the confirmation check icon.",
                        "attributes": {
                          "static": {
                            "class": "slds-is-selected"
                          }
                        },
                        "children": [
                          {
                            "name": "selectedIconContainer",
                            "restrict": [
                              "span"
                            ],
                            "description": "Icon container for the selected-state check glyph.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon_container"
                              }
                            },
                            "children": [
                              {
                                "name": "selectedIconSvg",
                                "restrict": [
                                  "svg"
                                ],
                                "description": "Action check icon rendered when the picker is selected.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon slds-icon_large slds-icon-action-check"
                                  }
                                }
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "notSelectedIcon",
                        "restrict": [
                          "span"
                        ],
                        "description": "Wrapper shown when the input is not checked. Contains the option's representative icon.",
                        "attributes": {
                          "static": {
                            "class": "slds-is-not-selected"
                          }
                        },
                        "children": [
                          {
                            "name": "notSelectedIconContainer",
                            "restrict": [
                              "span"
                            ],
                            "description": "Icon container for the not-selected option glyph.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon_container"
                              }
                            },
                            "children": [
                              {
                                "name": "notSelectedIconSvg",
                                "restrict": [
                                  "svg"
                                ],
                                "description": "Option icon rendered when the picker is not selected. Sprite class is consumer-supplied.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon slds-icon_large slds-icon-text-default"
                                  }
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "value": "text",
                    "class": "slds-visual-picker__text",
                    "description": "Non-coverable content. The figure renders headline and supporting text and the checked indicator is drawn as a corner ribbon plus a separate check icon span.",
                    "children": [
                      {
                        "name": "textGroup",
                        "restrict": [
                          "span"
                        ],
                        "description": "Wrapper around the figure's text content (heading, supporting line, or any custom inline text).",
                        "attributes": {
                          "static": {}
                        },
                        "children": [
                          {
                            "name": "headline",
                            "restrict": [
                              "span"
                            ],
                            "description": "Primary text in the figure (e.g., price, item heading).",
                            "renderWhen": "slotFilled",
                            "attributes": {
                              "static": {
                                "class": "slds-text-heading_large"
                              }
                            }
                          },
                          {
                            "name": "subline",
                            "restrict": [
                              "span"
                            ],
                            "description": "Secondary supporting text below the headline.",
                            "renderWhen": "slotFilled",
                            "attributes": {
                              "static": {
                                "class": "slds-text-title"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "body",
            "restrict": [
              "span"
            ],
            "description": "Text area rendered beneath (or beside, in vertical) the figure. Hosts the option's caption.",
            "attributes": {
              "static": {
                "class": "slds-visual-picker__body"
              }
            },
            "children": [
              {
                "name": "bodyTitle",
                "restrict": [
                  "span"
                ],
                "description": "Body caption text. Typography class is supplied by the caller (e.g. slds-text-title, slds-text-heading_small).",
                "attributes": {
                  "static": {}
                }
              }
            ]
          },
          {
            "name": "textCheck",
            "restrict": [
              "span"
            ],
            "description": "Corner check indicator for the non-coverable (text) figure. Becomes visible when the input is checked.",
            "renderWhen": {
              "prop": "content",
              "eq": "text"
            },
            "attributes": {
              "static": {
                "class": "slds-icon_container slds-visual-picker__text-check"
              }
            },
            "children": [
              {
                "name": "textCheckIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Check glyph rendered inside the corner indicator.",
                "attributes": {
                  "static": {
                    "class": "slds-icon slds-icon-text-check slds-icon_x-small"
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  }
}