{
  "name": "ds-select",
  "description": "Select dropdown component",
  "docUrl": "https://design.soracom.io/design-system/elements/select/",
  "category": "elements",
  "htmlElements": [
    "select"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--small",
        "--large"
      ]
    },
    "width": {
      "support": "subset",
      "values": [
        "--narrow",
        "--mid",
        "--wide",
        "--extra-wide",
        "--full-width"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "state": {
      "support": "subset",
      "values": [
        "--disabled"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--hide-label",
        "--button-default",
        "--addon"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    }
  },
  "structure": {
    "containerWrapper": "div"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<select class=\"ds-select\"><option>Select an option</option><option>Option 1</option><option>Option 2</option></select>"
    },
    {
      "name": "container",
      "html": "<div class=\"ds-select\"><select><option>Select an option</option><option>Option 1</option><option>Option 2</option></select></div>"
    },
    {
      "name": "withLabel",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Select Label</div><div class=\"ds-select\"><select><option>Select an option</option><option>Option 1</option><option>Option 2</option></select></div></label>"
    },
    {
      "name": "small",
      "html": "<select class=\"ds-select --small\"><option>Small select</option></select>"
    },
    {
      "name": "color-blue",
      "html": "<select class=\"ds-select --color-blue\"><option>Blue select</option><option>Option 1</option></select>"
    },
    {
      "name": "color-purple",
      "html": "<select class=\"ds-select --color-purple\"><option>Purple select</option><option>Option 1</option></select>"
    },
    {
      "name": "with-icon",
      "html": "<select class=\"ds-select --icon-chevron-down\"><option>Select with icon</option><option>Option 1</option></select>"
    },
    {
      "name": "icon-and-color",
      "html": "<select class=\"ds-select --icon-settings --color-blue\"><option>Settings</option><option>Option 1</option></select>"
    }
  ]
}