{
  "_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": "DockedComposer",
  "description": "Bottom-anchored panel that hosts an in-context task such as composing an email, logging a call, creating a task, or running a voice interaction. Sits inside a fixed container along the viewport's inline-end edge, supports open/closed/focused states, and can be popped out into a modal or collapsed into an overflow trigger.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./dockedComposer.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "dockedComposer",
    "restrict": [
      "section",
      "div"
    ],
    "description": "Root docked-composer panel that frames a header, body, and footer along the bottom edge of the viewport. The panel uses the SLDS grid utilities to vertically stack its regions.",
    "attributes": {
      "static": {
        "class": "slds-docked-composer slds-grid slds-grid_vertical"
      }
    },
    "modifiers": [
      {
        "name": "overflow",
        "attribute": "class",
        "value": "slds-docked-composer_overflow",
        "description": "Collapses the composer into a single overflow trigger used when multiple composers exceed the viewport width."
      }
    ],
    "children": [
      {
        "name": "header",
        "restrict": [
          "header",
          "div"
        ],
        "description": "Top bar of the composer that contains the icon, title, and window actions (minimize, expand, close).",
        "attributes": {
          "static": {
            "class": "slds-docked-composer__header slds-grid slds-shrink-none"
          }
        },
        "children": [
          {
            "name": "headerMedia",
            "restrict": [
              "div"
            ],
            "description": "Media object pairing the leading icon with the title text.",
            "attributes": {
              "static": {
                "class": "slds-media slds-media_center slds-no-space"
              }
            },
            "children": [
              {
                "name": "headerFigure",
                "restrict": [
                  "div"
                ],
                "description": "Media figure holding the leading icon.",
                "attributes": {
                  "static": {
                    "class": "slds-media__figure slds-m-right_x-small"
                  }
                },
                "children": [
                  {
                    "name": "headerIconContainer",
                    "restrict": [
                      "span"
                    ],
                    "description": "Icon container for the leading icon.",
                    "attributes": {
                      "static": {
                        "class": "slds-icon_container"
                      }
                    },
                    "children": [
                      {
                        "name": "headerIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Leading icon glyph that identifies the composer type (call, email, task, etc.).",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_small slds-icon-text-default"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "headerBody",
                "restrict": [
                  "div"
                ],
                "description": "Media body holding the title and an optional minimized indicator.",
                "attributes": {
                  "static": {
                    "class": "slds-media__body"
                  }
                },
                "children": [
                  {
                    "name": "minimizedIndicator",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label that announces the panel as minimized when closed.",
                    "renderWhen": {
                      "prop": "state",
                      "eq": "closed"
                    },
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  },
                  {
                    "name": "headerTitle",
                    "restrict": [
                      "h2",
                      "h3"
                    ],
                    "description": "Title of the composer.",
                    "attributes": {
                      "static": {
                        "class": "slds-truncate"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "headerActions",
            "restrict": [
              "div"
            ],
            "description": "Action group at the end of the header that holds the minimize, expand, and close buttons.",
            "attributes": {
              "static": {
                "class": "slds-docked-composer__actions slds-col_bump-left slds-shrink-none"
              }
            },
            "children": [
              {
                "name": "minimizeButton",
                "restrict": [
                  "button"
                ],
                "description": "Icon button that minimizes the composer back to its closed (collapsed) state.",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon"
                  }
                },
                "children": [
                  {
                    "name": "minimizeIcon",
                    "description": "Glyph rendered inside the minimize button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon"
                      }
                    },
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "minimizeAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label announcing the minimize action.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ]
              },
              {
                "name": "expandButton",
                "restrict": [
                  "button"
                ],
                "description": "Icon button that pops the composer out into a modal.",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon"
                  }
                },
                "children": [
                  {
                    "name": "expandIcon",
                    "description": "Glyph rendered inside the expand button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon"
                      }
                    },
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "expandAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label announcing the expand action.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ]
              },
              {
                "name": "closeButton",
                "restrict": [
                  "button"
                ],
                "description": "Icon button that closes the composer entirely.",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon"
                  }
                },
                "children": [
                  {
                    "name": "closeIcon",
                    "description": "Glyph rendered inside the close button.",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon"
                      }
                    },
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "closeAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden label announcing the close action.",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "body",
        "restrict": [
          "div"
        ],
        "description": "Primary content region of the composer. Hosts the task-specific UI such as a message body, form, voice call detail, or email composer.",
        "attributes": {
          "static": {
            "class": "slds-docked-composer__body"
          }
        },
        "modifiers": [
          {
            "name": "form",
            "attribute": "class",
            "value": "slds-docked-composer__body_form",
            "description": "Adds form-friendly padding and top-aligned justification when the body hosts a form layout (e.g., New Task)."
          }
        ],
        "children": [
          {
            "name": "lead",
            "restrict": [
              "div"
            ],
            "description": "First region inside the body, typically holding lead-in metadata or a recipient row.",
            "attributes": {
              "static": {
                "class": "slds-docked-composer__lead"
              }
            }
          },
          {
            "name": "toolbar",
            "restrict": [
              "div"
            ],
            "description": "Toolbar inside the body, used for formatting controls when the body hosts a rich text or email composer.",
            "attributes": {
              "static": {
                "class": "slds-docked-composer__toolbar"
              }
            }
          },
          {
            "name": "input",
            "restrict": [
              "textarea",
              "div"
            ],
            "description": "Multi-line text input region within the composer body used for free-form composition.",
            "attributes": {
              "static": {
                "class": "slds-docked-composer__input"
              }
            }
          }
        ]
      },
      {
        "name": "footer",
        "restrict": [
          "footer",
          "div"
        ],
        "description": "Bottom bar of the composer that contains primary actions such as Send, Save, or call follow-up controls.",
        "attributes": {
          "static": {
            "class": "slds-docked-composer__footer slds-shrink-none"
          }
        }
      },
      {
        "name": "overflowButton",
        "restrict": [
          "button"
        ],
        "description": "Trigger rendered in place of the panel content when the composer is collapsed into an overflow control. Only present when the overflow modifier is active.",
        "renderWhen": {
          "prop": "modifier",
          "eq": "overflow"
        },
        "attributes": {
          "static": {
            "class": "slds-button slds-button_icon slds-docked-composer_overflow__button"
          }
        },
        "children": [
          {
            "name": "overflowIcon",
            "description": "Glyph rendered inside the overflow trigger.",
            "attributes": {
              "static": {
                "class": "slds-button__icon"
              }
            },
            "component": "PrimitiveIcon"
          },
          {
            "name": "overflowCount",
            "restrict": [
              "span"
            ],
            "description": "Numeric badge showing how many composers are collapsed behind the overflow trigger.",
            "attributes": {
              "static": {
                "class": "slds-text-body_small slds-m-left_xx-small"
              }
            }
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "closed",
      "class": "slds-is-closed"
    },
    {
      "state": "focused",
      "class": "slds-has-focus"
    }
  ],
  "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": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    },
    {
      "name": "closed",
      "type": "boolean",
      "description": "Whether the component is in the closed state"
    },
    {
      "name": "focused",
      "type": "boolean",
      "description": "Whether the component is in the focused state"
    }
  ]
}