{
  "_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": "Timepicker",
  "description": "Initializes a timepicker",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Initializes a timepicker",
    "children": [
      {
        "name": "label",
        "restrict": [
          "label"
        ],
        "description": "Time input label",
        "slot": {
          "name": "label",
          "required": true
        },
        "children": [
          {
            "name": "requiredIndicator",
            "restrict": [
              "abbr"
            ],
            "description": "Required-field indicator rendered before the label text",
            "renderWhen": {
              "prop": "required",
              "eq": "true"
            },
            "attributes": {
              "static": {
                "title": "required",
                "aria-hidden": "true"
              }
            }
          }
        ]
      },
      {
        "name": "control",
        "restrict": [
          "div"
        ],
        "description": "Form-element control wrapper around the combobox",
        "children": [
          {
            "name": "comboboxContainer",
            "restrict": [
              "div"
            ],
            "description": "Outer combobox container",
            "children": [
              {
                "name": "combobox",
                "restrict": [
                  "div"
                ],
                "description": "Combobox root that hosts the trigger input and dropdown",
                "children": [
                  {
                    "name": "formElement",
                    "restrict": [
                      "div"
                    ],
                    "description": "Inline form-element wrapper that holds the input and the trailing clock icon",
                    "attributes": {
                      "static": {
                        "role": "none"
                      }
                    },
                    "children": [
                      {
                        "name": "input",
                        "restrict": [
                          "input"
                        ],
                        "description": "Text input that acts as the combobox trigger",
                        "attributes": {
                          "static": {
                            "type": "text",
                            "role": "combobox",
                            "autocomplete": "off",
                            "aria-autocomplete": "list",
                            "aria-haspopup": "listbox"
                          },
                          "bound": {
                            "aria-expanded": {
                              "prop": "open"
                            },
                            "aria-controls": {
                              "prop": "dropdownId"
                            },
                            "aria-activedescendant": {
                              "prop": "activeOptionId"
                            },
                            "placeholder": {
                              "prop": "placeholder"
                            },
                            "value": {
                              "prop": "value"
                            },
                            "id": {
                              "prop": "inputId"
                            }
                          },
                          "conditional": {
                            "disabled": {
                              "when": "disabled",
                              "value": ""
                            }
                          }
                        }
                      },
                      {
                        "name": "inputIcon",
                        "restrict": [
                          "span"
                        ],
                        "description": "Trailing clock icon container inside the input",
                        "children": [
                          {
                            "name": "inputIconGlyph",
                            "description": "Clock SVG glyph rendered inside the trailing icon container",
                            "component": "PrimitiveIcon"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "dropdown",
                    "restrict": [
                      "div"
                    ],
                    "description": "Dropdown panel that lists selectable times",
                    "attributes": {
                      "static": {
                        "role": "listbox",
                        "tabindex": "0",
                        "aria-busy": "false"
                      },
                      "bound": {
                        "id": {
                          "prop": "dropdownId"
                        },
                        "aria-label": {
                          "prop": "dropdownLabel"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "listbox",
                        "restrict": [
                          "ul"
                        ],
                        "description": "Listbox of time options",
                        "attributes": {
                          "static": {
                            "role": "presentation"
                          }
                        },
                        "children": [
                          {
                            "name": "listboxItem",
                            "restrict": [
                              "li"
                            ],
                            "description": "Wrapper list item for each time option",
                            "repeats": true,
                            "attributes": {
                              "static": {
                                "role": "presentation"
                              }
                            },
                            "children": [
                              {
                                "name": "option",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Selectable time option row",
                                "attributes": {
                                  "static": {
                                    "role": "option"
                                  },
                                  "bound": {
                                    "id": {
                                      "prop": "optionId"
                                    },
                                    "aria-selected": {
                                      "prop": "selected"
                                    },
                                    "aria-checked": {
                                      "prop": "checked"
                                    }
                                  }
                                },
                                "children": [
                                  {
                                    "name": "optionIcon",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Leading figure that hosts the selected-state check icon (empty when not selected)",
                                    "children": [
                                      {
                                        "name": "optionSelectedIcon",
                                        "restrict": [
                                          "span"
                                        ],
                                        "description": "Check-icon container shown only when the option is selected",
                                        "renderWhen": {
                                          "prop": "selected",
                                          "eq": "true"
                                        },
                                        "children": [
                                          {
                                            "name": "optionSelectedIconGlyph",
                                            "description": "Check SVG glyph",
                                            "component": "PrimitiveIcon"
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "name": "optionBody",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Body of the option row that wraps the time label",
                                    "children": [
                                      {
                                        "name": "optionLabel",
                                        "restrict": [
                                          "span"
                                        ],
                                        "description": "Truncating text label for the option (e.g. '7:00am')"
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "help",
        "restrict": [
          "div"
        ],
        "description": "Inline help / error message rendered after the control",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "help"
        }
      }
    ]
  },
  "states": [
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the timepicker is disabled"
    },
    {
      "name": "required",
      "type": "boolean",
      "aria": "aria-required",
      "description": "Whether the timepicker is required"
    },
    {
      "name": "open",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the timepicker dropdown is open"
    },
    {
      "name": "focused",
      "type": "boolean",
      "description": "Whether the timepicker input has focus"
    },
    {
      "name": "error",
      "type": "boolean",
      "description": "Whether the timepicker is in an error state"
    },
    {
      "name": "selected",
      "type": "boolean",
      "aria": "aria-selected",
      "description": "Whether a dropdown option is the currently selected time"
    },
    {
      "name": "errorIcon",
      "type": "boolean",
      "description": "Whether the component is in the errorIcon state"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "combobox-pattern",
        "description": "Follow the ARIA 1.2 combobox pattern: the input carries role='combobox' with aria-controls pointing at the listbox, aria-haspopup='listbox', and aria-expanded reflecting open state."
      },
      {
        "id": "listbox-role",
        "description": "The dropdown panel must carry role='listbox' and each selectable row must carry role='option'."
      },
      {
        "id": "active-descendant",
        "description": "Keyboard focus stays on the input; aria-activedescendant on the input points at the focused option's id."
      },
      {
        "id": "required-indicator",
        "description": "When required, the visual asterisk must be aria-hidden so that aria-required (or required) on the input is the canonical signal."
      },
      {
        "id": "error-message",
        "description": "Inline error help text must be associated with the input via aria-describedby."
      }
    ]
  },
  "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"
        }
      }
    }
  }
}