{
  "_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": "DropZone",
  "description": "Screen-builder container that marks a region where dropped content can be inserted, with an optional top label, populated-region wrappers, an insertion-point slot indicator, and per-region action buttons.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./dropZone.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "dropZone",
    "restrict": [
      "div"
    ],
    "description": "Root drop-zone wrapper. Renders a dotted boundary via ::after and hosts the optional top label, content, populated regions, and the drag insertion slot.",
    "attributes": {
      "static": {
        "class": "slds-drop-zone"
      }
    },
    "modifiers": [
      {
        "name": "drag",
        "attribute": "class",
        "value": "slds-drop-zone_drag",
        "description": "Indicates that a component is currently being dragged over this zone. Switches the boundary to a solid success-colored border and enables the insertion-point slot."
      }
    ],
    "children": [
      {
        "name": "label",
        "restrict": [
          "div"
        ],
        "description": "Top label of the drop zone, anchored above the upper edge.",
        "renderWhen": "slotFilled",
        "attributes": {
          "static": {
            "class": "slds-drop-zone__label"
          }
        },
        "children": [
          {
            "name": "labelMedia",
            "restrict": [
              "div"
            ],
            "description": "Media object that pairs the label icon with the label text.",
            "attributes": {
              "static": {
                "class": "slds-media slds-media_center"
              }
            },
            "children": [
              {
                "name": "labelMediaFigure",
                "restrict": [
                  "div"
                ],
                "description": "Figure cell that holds the label icon.",
                "attributes": {
                  "static": {
                    "class": "slds-media__figure"
                  }
                },
                "children": [
                  {
                    "name": "labelIconContainer",
                    "restrict": [
                      "span"
                    ],
                    "description": "Icon container that scopes the label icon's color and sprite.",
                    "attributes": {
                      "static": {
                        "class": "slds-icon_container slds-current-color"
                      }
                    },
                    "children": [
                      {
                        "name": "labelIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Small utility icon glyph paired with the label text.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_x-small slds-icon-text-default"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "labelMediaBody",
                "restrict": [
                  "div"
                ],
                "description": "Body cell of the label media object that holds the heading or label button.",
                "attributes": {
                  "static": {
                    "class": "slds-media__body"
                  }
                },
                "slot": {
                  "name": "labelContent"
                }
              }
            ]
          }
        ]
      },
      {
        "name": "content",
        "restrict": [
          "div"
        ],
        "description": "Default slot for content that lives directly inside the drop zone (e.g., a placeholder region or freeform components above the insertion point).",
        "slot": {
          "name": "default"
        }
      },
      {
        "name": "dragSlot",
        "restrict": [
          "div"
        ],
        "description": "Visible insertion-point indicator rendered between regions while a component is being dragged over the zone.",
        "renderWhen": {
          "prop": "drag",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-drop-zone_drag__slot"
          }
        }
      },
      {
        "name": "container",
        "restrict": [
          "div"
        ],
        "description": "Wrapper for a populated region inside the drop zone. Reveals its label and action buttons on hover or focus-within.",
        "renderWhen": "slotFilled",
        "repeats": true,
        "attributes": {
          "static": {
            "class": "slds-drop-zone__container",
            "tabindex": "-1"
          }
        },
        "children": [
          {
            "name": "containerLabel",
            "restrict": [
              "div"
            ],
            "description": "Label for the populated region. Hidden until the container is hovered or focused.",
            "attributes": {
              "static": {
                "class": "slds-drop-zone__label slds-drop-zone__label_container"
              }
            },
            "children": [
              {
                "name": "containerLabelMedia",
                "restrict": [
                  "div"
                ],
                "description": "Media object inside the container label.",
                "attributes": {
                  "static": {
                    "class": "slds-media slds-media_center"
                  }
                },
                "children": [
                  {
                    "name": "containerLabelFigure",
                    "restrict": [
                      "div"
                    ],
                    "description": "Figure cell that holds the container label icon.",
                    "attributes": {
                      "static": {
                        "class": "slds-media__figure"
                      }
                    },
                    "children": [
                      {
                        "name": "containerLabelIconContainer",
                        "restrict": [
                          "span"
                        ],
                        "description": "Icon container scoping the container label icon's color and sprite.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon_container slds-current-color"
                          }
                        },
                        "children": [
                          {
                            "name": "containerLabelIcon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Small utility icon glyph for the populated-region label.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_x-small slds-icon-text-default"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "containerLabelBody",
                    "restrict": [
                      "div"
                    ],
                    "description": "Body cell that holds the heading with the container label button.",
                    "attributes": {
                      "static": {
                        "class": "slds-media__body"
                      }
                    },
                    "children": [
                      {
                        "name": "containerLabelHeading",
                        "restrict": [
                          "h2"
                        ],
                        "description": "Heading element wrapping the container label button.",
                        "children": [
                          {
                            "name": "containerLabelButton",
                            "restrict": [
                              "button"
                            ],
                            "description": "Reset-styled button used to edit/select the populated region.",
                            "attributes": {
                              "static": {
                                "class": "slds-drop-zone__label_button slds-button_reset"
                              }
                            },
                            "children": [
                              {
                                "name": "containerLabelAssistiveText",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Visually hidden prefix announcing the edit action.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-assistive-text"
                                  }
                                }
                              },
                              {
                                "name": "containerLabelText",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Visible region name rendered inside the label button.",
                                "slot": {
                                  "name": "containerLabel"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "containerContent",
            "restrict": [
              "div"
            ],
            "description": "Slot for the content rendered inside the populated region (typically a card or other freeform component).",
            "slot": {
              "name": "containerContent"
            }
          },
          {
            "name": "actions",
            "restrict": [
              "div"
            ],
            "description": "Action affordances revealed when the populated region is hovered or focused.",
            "attributes": {
              "static": {
                "class": "slds-drop-zone__actions"
              }
            },
            "children": [
              {
                "name": "actionsGroup",
                "restrict": [
                  "div"
                ],
                "description": "Button group that groups the per-region action buttons.",
                "attributes": {
                  "static": {
                    "class": "slds-button-group",
                    "role": "group"
                  }
                },
                "children": [
                  {
                    "name": "actionButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Icon-only brand button used for a region-level action (e.g., Move, Close).",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_icon slds-button_icon-brand slds-button_icon-x-small"
                      }
                    },
                    "children": [
                      {
                        "name": "actionButtonIcon",
                        "description": "Glyph rendered inside the action button.",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon"
                          }
                        },
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "actionButtonAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden label announcing the action button's purpose.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "hovered",
      "class": "slds-is-hovered"
    }
  ],
  "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": "hovered",
      "type": "boolean",
      "description": "Whether the component is in the hovered state"
    }
  ]
}