{
  "name": "ds-select",
  "description": "Select dropdown component",
  "docUrl": "https://design.soracom.io/design-system/elements/select/",
  "category": "elements",
  "htmlElements": [
    "select"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": [
      "--small",
      "--large"
    ],
    "width": [
      "--narrow",
      "--mid",
      "--wide",
      "--extra-wide",
      "--full-width"
    ],
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "state": [
      "--disabled",
      "--active"
    ],
    "variant": [
      "--hide-label",
      "--button-default",
      "--addon"
    ],
    "icon": "all",
    "indent": "all",
    "gap": "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>"
    }
  ]
}