{
  "name": "select",
  "displayName": "Select",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "select",
  "selector": ".l-select",
  "subItemOf": null,
  "summary": "A styled native `<select>` using the customizable `base-select` appearance.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/select",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "data-size",
      "data": true,
      "values": [
        "xs",
        "sm",
        "md",
        "lg",
        "xl"
      ],
      "description": "Control height on the shared `--l-size-control-*` scale (default `md`)."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the select."
    },
    {
      "name": "required",
      "data": false,
      "values": [],
      "description": "Marks the field as required."
    },
    {
      "name": "multiple",
      "data": false,
      "values": [],
      "description": "Allows multiple selections."
    }
  ],
  "events": [
    {
      "name": "change",
      "description": "Fires when an option is selected.",
      "cancelable": false
    },
    {
      "name": "input",
      "description": "Fires when the value changes.",
      "cancelable": false
    }
  ],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-select",
      "description": "Base select element with `appearance: base-select`."
    },
    {
      "name": ".l-select-item",
      "description": "Option styling with checkmark indicator."
    },
    {
      "name": ".l-select-item-media",
      "description": "Leading image/icon inside a rich option."
    },
    {
      "name": ".l-select-item-text",
      "description": "Column wrapper stacking title + description."
    },
    {
      "name": ".l-select-item-title",
      "description": "Primary label of a rich option."
    },
    {
      "name": ".l-select-item-description",
      "description": "Secondary line of a rich option (hidden in the trigger)."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--height",
      "default": "var(--l-form-control-height)",
      "description": "Control height (set via `data-size` or directly)."
    },
    {
      "name": "--border-radius",
      "default": "var(--l-form-control-border-radius)",
      "description": "Trigger border radius."
    },
    {
      "name": "--caret-color",
      "default": "var(--l-form-control-placeholder-color)",
      "description": "Chevron color."
    },
    {
      "name": "--caret-icon",
      "default": "mdi:chevron-down",
      "description": "Chevron mask image; override with any `url()` to re-skin."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Basic",
      "language": "html",
      "code": "<select class=\"l-select\">\n<option class=\"l-select-item\">One</option>\n<option class=\"l-select-item\">Two</option>\n</select>"
    }
  ]
}