{
  "name": "select",
  "displayName": "Select",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-select",
  "nativeTag": null,
  "selector": "l-select",
  "subItemOf": null,
  "summary": "A searchable select with a button trigger and a popover listbox.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/select",
    "js": "luxen-ui/select"
  },
  "properties": [
    {
      "name": "placeholder",
      "attribute": "placeholder",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Placeholder shown in the trigger when nothing is selected."
    },
    {
      "name": "label",
      "attribute": "label",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Accessible label for the trigger."
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "SelectSize",
      "default": "'md'",
      "reflects": true,
      "description": "Control size."
    },
    {
      "name": "searchable",
      "attribute": "searchable",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Show a filter box inside the popover (opt-in, for long lists)."
    },
    {
      "name": "withClear",
      "attribute": "with-clear",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Show a button to clear the value."
    },
    {
      "name": "placement",
      "attribute": "placement",
      "type": "Placement",
      "default": "'bottom-start'",
      "reflects": false,
      "description": "Panel placement relative to the trigger."
    },
    {
      "name": "multiple",
      "attribute": "multiple",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Allow selecting multiple values — renders chips and submits one entry per value."
    },
    {
      "name": "filter",
      "attribute": null,
      "type": "SelectFilter",
      "default": "defaultFilter",
      "reflects": false,
      "description": "Override the option filter. `(item, query) => boolean`."
    },
    {
      "name": "value",
      "attribute": null,
      "type": "string | string[]",
      "default": null,
      "reflects": false,
      "description": "The selected value (single mode) or array of values (multiple mode)."
    },
    {
      "name": "validationTarget",
      "attribute": null,
      "type": null,
      "default": null,
      "reflects": false,
      "description": ""
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "change",
      "description": "Fired when the selection changes. Bubbles. Not cancelable. Properties: `value: string | string[]`.",
      "cancelable": false
    },
    {
      "name": "input",
      "description": "Fired as the user types in the search box. Bubbles. Not cancelable. Properties: `value: string` (the query).",
      "cancelable": false
    },
    {
      "name": "show",
      "description": "Fired before the listbox opens. Cancelable.",
      "cancelable": true
    },
    {
      "name": "hide",
      "description": "Fired before the listbox 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": [
        {
          "name": "{ focusTrigger = true }",
          "type": null
        }
      ],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "base",
      "description": "The host wrapper."
    },
    {
      "name": "trigger",
      "description": "The button that opens the listbox."
    },
    {
      "name": "value",
      "description": "The selection display inside the trigger."
    },
    {
      "name": "chevron",
      "description": "The trigger chevron."
    },
    {
      "name": "clear",
      "description": "The clear button."
    },
    {
      "name": "panel",
      "description": "The floating popover panel."
    },
    {
      "name": "search",
      "description": "The search input."
    },
    {
      "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": "Trigger + panel radius."
    },
    {
      "name": "--background",
      "default": null,
      "description": "Panel background."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-select label=\"Country\" name=\"country\" placeholder=\"Select a country…\">\n  <datalist>\n    <option value=\"us\">United States</option>\n    <option value=\"fr\" selected>France</option>\n  </datalist>\n</l-select>"
    }
  ]
}