{
  "_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": "ColorPicker",
  "description": "Fully featured color picker, with swatches and a custom color config",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Fully featured color picker, with swatches and a custom color config",
    "children": [
      {
        "name": "summary",
        "restrict": [
          "div"
        ],
        "description": "'Summary' element for color selection.",
        "children": [
          {
            "name": "summaryLabel",
            "restrict": [
              "label"
            ],
            "description": "Label for summary input",
            "attributes": {
              "static": {
                "class": "slds-form-element__label slds-color-picker__summary-label"
              }
            }
          },
          {
            "name": "summaryControl",
            "restrict": [
              "div"
            ],
            "description": "Form-element control wrapper around the trigger button and hex input",
            "children": [
              {
                "name": "summaryButton",
                "restrict": [
                  "button"
                ],
                "description": "Button that toggles the Color Picker Selector",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-color-picker__summary-button slds-button_icon slds-button_icon-more"
                  }
                },
                "children": [
                  {
                    "name": "swatch",
                    "description": "A swatch",
                    "attributes": {
                      "static": {
                        "class": "slds-swatch"
                      }
                    },
                    "children": [
                      {
                        "name": "swatchAssistiveText",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "summaryButtonIcon",
                    "attributes": {
                      "static": {
                        "class": "slds-button__icon slds-button__icon_small slds-m-left_xx-small",
                        "aria-hidden": "true"
                      }
                    },
                    "children": [
                      {
                        "name": "summaryButtonIconUse"
                      }
                    ]
                  },
                  {
                    "name": "summaryButtonAssistiveText",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ]
              },
              {
                "name": "swatch",
                "restrict": [
                  "span"
                ],
                "description": "A swatch"
              },
              {
                "name": "swatchAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Assistive-text label describing the swatch's current color"
              },
              {
                "name": "summaryButtonIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Caret icon rendered inside the trigger button"
              },
              {
                "name": "summaryButtonIconUse",
                "restrict": [
                  "use"
                ],
                "description": "Use element referencing the caret sprite"
              },
              {
                "name": "summaryButtonAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Assistive text announcing the trigger's action and current color"
              },
              {
                "name": "summaryInput",
                "restrict": [
                  "div"
                ],
                "description": "Input field for summary UI",
                "children": [
                  {
                    "name": "summaryInputField",
                    "restrict": [
                      "input"
                    ],
                    "description": "Hex color value text input",
                    "attributes": {
                      "static": {
                        "class": "slds-input"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-color-picker__summary-input"
                  }
                }
              },
              {
                "name": "summaryError",
                "restrict": [
                  "p"
                ],
                "description": "Validation error message for the summary hex input",
                "renderWhen": {
                  "prop": "hasError",
                  "eq": "true"
                },
                "attributes": {
                  "static": {
                    "class": "slds-form-error"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-form-element__control"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element slds-color-picker__summary"
          }
        },
        "modifiers": [
          {
            "name": "hasError",
            "attribute": "class",
            "value": "slds-has-error",
            "description": "Applies the form-element error state to the summary block"
          }
        ]
      },
      {
        "name": "dropdown",
        "restrict": [
          "section"
        ],
        "description": "The selector subcomponent. Extends upon a .slds-popover",
        "renderWhen": {
          "prop": "open",
          "eq": "true"
        },
        "children": [
          {
            "name": "dropdownBody",
            "restrict": [
              "div"
            ],
            "description": "Popover body wrapper",
            "children": [
              {
                "name": "dropdownMedia",
                "restrict": [
                  "div"
                ],
                "description": "Media object that lays out the dropdown content",
                "children": [
                  {
                    "name": "dropdownMediaBody",
                    "restrict": [
                      "div"
                    ],
                    "description": "Media body that contains the tabs or single-mode content",
                    "children": [
                      {
                        "name": "tabs",
                        "restrict": [
                          "div"
                        ],
                        "description": "Default + Custom tabs container (present in the base layout)",
                        "renderWhen": {
                          "prop": "mode",
                          "eq": "base"
                        },
                        "children": [
                          {
                            "name": "tabsNav",
                            "restrict": [
                              "ul"
                            ],
                            "description": "Tablist of Default and Custom tabs",
                            "children": [
                              {
                                "name": "tabItem",
                                "restrict": [
                                  "li"
                                ],
                                "description": "Tablist item (Default or Custom)",
                                "children": [
                                  {
                                    "name": "tabLink",
                                    "restrict": [
                                      "a"
                                    ],
                                    "description": "Anchor acting as the tab trigger",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-tabs_default__link",
                                        "role": "tab"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-tabs_default__item",
                                    "role": "presentation"
                                  }
                                },
                                "modifiers": [
                                  {
                                    "name": "active",
                                    "attribute": "class",
                                    "value": "slds-is-active",
                                    "description": "Marks this tab item as the currently selected tab"
                                  }
                                ]
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-tabs_default__nav",
                                "role": "tablist"
                              }
                            }
                          },
                          {
                            "name": "tabPanelDefault",
                            "restrict": [
                              "div"
                            ],
                            "description": "Tabpanel containing the preset swatch grid",
                            "attributes": {
                              "static": {
                                "class": "slds-tabs_default__content",
                                "role": "tabpanel"
                              }
                            },
                            "modifiers": [
                              {
                                "name": "visibility",
                                "attribute": "class",
                                "options": [
                                  {
                                    "propValue": "active",
                                    "value": "slds-show"
                                  },
                                  {
                                    "propValue": "inactive",
                                    "value": "slds-hide"
                                  }
                                ],
                                "default": "active",
                                "description": "Toggles the Default tab panel between shown and hidden"
                              }
                            ]
                          },
                          {
                            "name": "tabPanelCustom",
                            "restrict": [
                              "div"
                            ],
                            "description": "Tabpanel containing the custom color tools",
                            "attributes": {
                              "static": {
                                "class": "slds-tabs_default__content",
                                "role": "tabpanel"
                              }
                            },
                            "modifiers": [
                              {
                                "name": "visibility",
                                "attribute": "class",
                                "options": [
                                  {
                                    "propValue": "active",
                                    "value": "slds-show"
                                  },
                                  {
                                    "propValue": "inactive",
                                    "value": "slds-hide"
                                  }
                                ],
                                "default": "inactive",
                                "description": "Toggles the Custom tab panel between shown and hidden"
                              }
                            ]
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-tabs_default"
                          }
                        }
                      },
                      {
                        "name": "swatches",
                        "restrict": [
                          "ul"
                        ],
                        "description": "Swatch container",
                        "children": [
                          {
                            "name": "swatchItem",
                            "restrict": [
                              "li"
                            ],
                            "description": "Color Picker swatch",
                            "children": [
                              {
                                "name": "swatchTrigger",
                                "restrict": [
                                  "a"
                                ],
                                "description": "Anchor that selects this swatch's color",
                                "children": [
                                  {
                                    "name": "swatchSample",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "A swatch",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-swatch"
                                      }
                                    },
                                    "children": [
                                      {
                                        "name": "swatchSampleAssistiveText",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-assistive-text"
                                          }
                                        }
                                      }
                                    ]
                                  },
                                  {
                                    "name": "swatchSampleAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Assistive text announcing the swatch's hex value"
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-color-picker__swatch-trigger"
                                  }
                                },
                                "variants": [
                                  {
                                    "name": "swatchTriggerRole",
                                    "description": "ARIA role applied to the swatch anchor. Matches the parent list's role: `option` for listbox swatches, `menuitem` for swatches-only menu swatches.",
                                    "options": [
                                      {
                                        "value": "option"
                                      },
                                      {
                                        "value": "menuitem"
                                      }
                                    ],
                                    "default": "option"
                                  }
                                ]
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-color-picker__swatch",
                                "role": "presentation"
                              }
                            }
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-color-picker__swatches"
                          }
                        },
                        "variants": [
                          {
                            "name": "swatchesRole",
                            "description": "ARIA role applied to the preset swatch list. `listbox` when the swatches are the primary selection (base + predefined-only); `menu` when wrapped in a swatches-only dropdown.",
                            "options": [
                              {
                                "value": "listbox"
                              },
                              {
                                "value": "menu"
                              }
                            ],
                            "default": "listbox"
                          }
                        ]
                      },
                      {
                        "name": "custom",
                        "restrict": [
                          "div"
                        ],
                        "description": "Custom picker selection container",
                        "children": [
                          {
                            "name": "customInstructions",
                            "restrict": [
                              "p"
                            ],
                            "description": "Assistive-text instructions for keyboard users of the custom range",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          },
                          {
                            "name": "customRange",
                            "restrict": [
                              "div"
                            ],
                            "description": "Custom picker range element",
                            "children": [
                              {
                                "name": "customRangeIndicator",
                                "restrict": [
                                  "a"
                                ],
                                "description": "Draggable position indicator on the custom range surface",
                                "children": [
                                  {
                                    "name": "customRangeAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Assistive text announcing the currently selected hex value",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-assistive-text"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-color-picker__range-indicator",
                                    "aria-live": "assertive",
                                    "aria-atomic": "true"
                                  }
                                }
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-color-picker__custom-range"
                              }
                            }
                          },
                          {
                            "name": "hueAndPreview",
                            "restrict": [
                              "div"
                            ],
                            "description": "Container element for the hue slider and preview swatch",
                            "children": [
                              {
                                "name": "hueLabel",
                                "restrict": [
                                  "label"
                                ],
                                "description": "Assistive-text label for the hue slider",
                                "attributes": {
                                  "static": {
                                    "class": "slds-assistive-text"
                                  }
                                }
                              },
                              {
                                "name": "hueSlider",
                                "restrict": [
                                  "input"
                                ],
                                "description": "The slide input that controls the hue",
                                "attributes": {
                                  "static": {
                                    "class": "slds-color-picker__hue-slider"
                                  }
                                }
                              },
                              {
                                "name": "huePreviewSwatch",
                                "restrict": [
                                  "span"
                                ],
                                "description": "A swatch",
                                "children": [
                                  {
                                    "name": "huePreviewAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Assistive text announcing the previewed hex value",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-assistive-text",
                                        "aria-hidden": "true"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-swatch"
                                  }
                                }
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-color-picker__hue-and-preview"
                              }
                            }
                          },
                          {
                            "name": "customInputs",
                            "restrict": [
                              "div"
                            ],
                            "description": "The group of direct input elements",
                            "children": [
                              {
                                "name": "customInputHex",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Hex input form-element",
                                "children": [
                                  {
                                    "name": "customInputHexLabel",
                                    "restrict": [
                                      "label"
                                    ],
                                    "description": "Label for the hex input",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-form-element__label"
                                      }
                                    }
                                  },
                                  {
                                    "name": "customInputHexControl",
                                    "restrict": [
                                      "div"
                                    ],
                                    "description": "Form-element control wrapping the hex input",
                                    "children": [
                                      {
                                        "name": "customInputHexField",
                                        "restrict": [
                                          "input"
                                        ],
                                        "description": "Hex text input",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-input"
                                          }
                                        }
                                      }
                                    ],
                                    "attributes": {
                                      "static": {
                                        "class": "slds-form-element__control"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-form-element slds-color-picker__input-custom-hex"
                                  }
                                },
                                "modifiers": [
                                  {
                                    "name": "hasError",
                                    "attribute": "class",
                                    "value": "slds-has-error",
                                    "description": "Applies the form-element error state to the hex input"
                                  }
                                ]
                              },
                              {
                                "name": "customInputRgb",
                                "restrict": [
                                  "div"
                                ],
                                "description": "RGB channel input form-element (R, G, or B)",
                                "children": [
                                  {
                                    "name": "customInputRgbLabel",
                                    "restrict": [
                                      "label"
                                    ],
                                    "description": "Label for the RGB channel input, wrapping an abbr element",
                                    "children": [
                                      {
                                        "name": "customInputRgbLabelAbbr",
                                        "restrict": [
                                          "abbr"
                                        ],
                                        "description": "Abbreviated channel name (R, G, B)"
                                      }
                                    ],
                                    "attributes": {
                                      "static": {
                                        "class": "slds-form-element__label"
                                      }
                                    }
                                  },
                                  {
                                    "name": "customInputRgbControl",
                                    "restrict": [
                                      "div"
                                    ],
                                    "description": "Form-element control wrapping the RGB channel input",
                                    "children": [
                                      {
                                        "name": "customInputRgbField",
                                        "restrict": [
                                          "input"
                                        ],
                                        "description": "RGB channel text input",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-input"
                                          }
                                        }
                                      }
                                    ],
                                    "attributes": {
                                      "static": {
                                        "class": "slds-form-element__control"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-form-element"
                                  }
                                }
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-color-picker__custom-inputs"
                              }
                            }
                          },
                          {
                            "name": "customError",
                            "restrict": [
                              "p"
                            ],
                            "description": "Validation error message for the custom hex input",
                            "renderWhen": {
                              "prop": "hasError",
                              "eq": "true"
                            },
                            "attributes": {
                              "static": {
                                "class": "slds-form-error"
                              }
                            }
                          }
                        ],
                        "renderWhen": {
                          "prop": "mode",
                          "eq": "custom-only"
                        },
                        "attributes": {
                          "static": {
                            "class": "slds-color-picker__custom"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-media__body"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-media"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-popover__body"
              }
            }
          },
          {
            "name": "footer",
            "restrict": [
              "footer"
            ],
            "description": "Popover footer hosting the Cancel and Done buttons",
            "children": [
              {
                "name": "footerActions",
                "restrict": [
                  "div"
                ],
                "description": "Footer for the Color Selector Picker",
                "children": [
                  {
                    "name": "footerCancelButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Cancel action button",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_neutral"
                      }
                    }
                  },
                  {
                    "name": "footerDoneButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Done action button",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_brand"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-color-picker__selector-footer"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-popover__footer"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-popover slds-color-picker__selector",
            "role": "dialog"
          }
        },
        "modifiers": [
          {
            "name": "visibility",
            "attribute": "class",
            "options": [
              {
                "propValue": "open",
                "value": "slds-show"
              },
              {
                "propValue": "closed",
                "value": "slds-hide"
              }
            ],
            "default": "closed",
            "description": "Toggles the popover between shown and hidden"
          }
        ]
      },
      {
        "name": "swatchesOnlyTrigger",
        "renderWhen": {
          "prop": "mode",
          "eq": "swatches-only"
        },
        "attributes": {
          "static": {
            "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
          }
        },
        "children": [
          {
            "name": "swatchesOnlyTriggerButton",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon slds-button_icon-border-filled",
                "aria-haspopup": "true",
                "aria-expanded": "false"
              }
            },
            "children": [
              {
                "name": "swatchesOnlyTriggerIcon",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon",
                    "aria-hidden": "true"
                  }
                },
                "children": [
                  {
                    "name": "swatchesOnlyTriggerIconUse"
                  }
                ]
              },
              {
                "name": "swatchesOnlyTriggerAssistiveText",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "name": "swatchesOnlyDropdown",
            "attributes": {
              "static": {
                "class": "slds-dropdown slds-dropdown_left"
              }
            }
          }
        ]
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-color-picker"
      }
    },
    "modifiers": [
      {
        "name": "swatchesOnly",
        "attribute": "class",
        "value": "slds-color-picker_swatches-only",
        "description": "Swatches Only UI"
      }
    ]
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the picker dropdown is open"
    },
    {
      "name": "value",
      "type": "enum",
      "description": "Selected color value (free-form hex/HSL string)"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the color picker is disabled"
    },
    {
      "name": "hasError",
      "type": "boolean",
      "description": "Whether the color picker is in an error state"
    },
    {
      "name": "mode",
      "type": "enum",
      "options": [
        "base",
        "predefined-only",
        "custom-only",
        "swatches-only"
      ],
      "description": "Which tools the picker exposes: base (preset + custom tabs), predefined-only, custom-only, or swatches-only"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "color-name",
        "description": "Selected color should be announced by name when possible"
      },
      {
        "id": "dialog-role",
        "description": "The open dropdown is a dialog and must expose an accessible name (aria-label) and pointer to its body (aria-describedby)"
      },
      {
        "id": "swatch-list",
        "description": "Preset swatches are exposed as a listbox/menu of options; each option must announce its color value via assistive text"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2018-06-01",
      "genReady": false,
      "lbc": "lightning-color-picker-custom"
    }
  },
  "cssSource": "./colorPicker.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "hasError",
      "class": "slds-has-error"
    }
  ]
}