{
  "name": "combobox",
  "displayName": "Combobox",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-combobox",
  "nativeTag": null,
  "selector": "l-combobox",
  "subItemOf": null,
  "summary": "A searchable text input with a filtered list of options.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/combobox"
  },
  "properties": [
    {
      "name": "value",
      "attribute": "value",
      "type": "string",
      "default": "''",
      "reflects": true,
      "description": "Selected value (the chosen option's `value`)."
    },
    {
      "name": "placeholder",
      "attribute": "placeholder",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Placeholder text in the input."
    },
    {
      "name": "label",
      "attribute": "label",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Accessible label for the input."
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "ComboboxSize",
      "default": "'md'",
      "reflects": true,
      "description": "Control size."
    },
    {
      "name": "withClear",
      "attribute": "with-clear",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Show a button to clear the value."
    },
    {
      "name": "allowCustom",
      "attribute": "allow-custom",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Accept a typed value that matches no option."
    },
    {
      "name": "highlight",
      "attribute": "highlight",
      "type": "boolean",
      "default": "true",
      "reflects": false,
      "description": "Wrap the matching substring of each option in `<mark>`."
    },
    {
      "name": "placement",
      "attribute": "placement",
      "type": "Placement",
      "default": "'bottom-start'",
      "reflects": false,
      "description": "Panel placement relative to the control."
    },
    {
      "name": "filter",
      "attribute": null,
      "type": "ComboboxFilter",
      "default": "defaultFilter",
      "reflects": false,
      "description": "Override the option filter. `(item, query) => boolean`."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "change",
      "description": "Fired when an option is selected. Bubbles. Not cancelable. Properties: `value: string`.",
      "cancelable": false
    },
    {
      "name": "input",
      "description": "Fired as the user types. Bubbles. Not cancelable. Properties: `value: string` (the query).",
      "cancelable": false
    },
    {
      "name": "show",
      "description": "Fired before the list opens. Cancelable.",
      "cancelable": true
    },
    {
      "name": "hide",
      "description": "Fired before the list closes. Cancelable.",
      "cancelable": true
    }
  ],
  "methods": [
    {
      "name": "formResetCallback",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "formStateRestoreCallback",
      "params": [
        {
          "name": "state",
          "type": "string"
        }
      ],
      "returns": null,
      "description": ""
    },
    {
      "name": "show",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "hide",
      "params": [],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "base",
      "description": "The host wrapper."
    },
    {
      "name": "control",
      "description": "The input control row (input + clear + chevron)."
    },
    {
      "name": "input",
      "description": "The text input."
    },
    {
      "name": "panel",
      "description": "The floating popover panel."
    },
    {
      "name": "listbox",
      "description": "The options container."
    },
    {
      "name": "option",
      "description": "Each option row."
    },
    {
      "name": "empty",
      "description": "The \"no results\" message."
    }
  ],
  "cssProperties": [
    {
      "name": "--height",
      "default": null,
      "description": "Control height. Defaults to the form-control height."
    },
    {
      "name": "--border-radius",
      "default": null,
      "description": "Control + panel radius."
    },
    {
      "name": "--background",
      "default": null,
      "description": "Panel background."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-combobox label=\"Country\" name=\"country\" placeholder=\"Search…\">\n  <datalist>\n    <option value=\"us\">United States</option>\n    <option value=\"fr\">France</option>\n  </datalist>\n</l-combobox>"
    }
  ]
}