{
  "name": "ds-switch",
  "description": "Toggle switch component",
  "docUrl": "https://design.soracom.io/design-system/elements/switch/",
  "category": "elements",
  "htmlElements": [
    "label",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--xsmall",
        "--small"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "state": {
      "support": "subset",
      "values": [
        "--disabled"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--hide-label",
        "--left-label",
        "--theme"
      ]
    },
    "icon": {
      "support": "all"
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<label class=\"ds-switch\"><input type=\"checkbox\" /><span>Toggle</span></label>"
    },
    {
      "name": "checked",
      "html": "<label class=\"ds-switch\"><input type=\"checkbox\" checked /><span>Enabled</span></label>"
    },
    {
      "name": "small",
      "html": "<label class=\"ds-switch --small\"><input type=\"checkbox\" /><span>Small switch</span></label>"
    },
    {
      "name": "xsmall",
      "html": "<label class=\"ds-switch --xsmall\"><input type=\"checkbox\" /><span>Extra small</span></label>"
    },
    {
      "name": "alert",
      "html": "<label class=\"ds-switch --alert\"><input type=\"checkbox\" checked /><span>Alert</span></label>"
    },
    {
      "name": "success",
      "html": "<label class=\"ds-switch --success\"><input type=\"checkbox\" checked /><span>Success</span></label>"
    },
    {
      "name": "color-blue",
      "html": "<label class=\"ds-switch --color-blue\"><input type=\"checkbox\" checked /><span>Blue</span></label>"
    },
    {
      "name": "with-icon",
      "html": "<label class=\"ds-switch --icon-lightning\"><input type=\"checkbox\" /><span>With icon</span></label>"
    },
    {
      "name": "icon-on-only",
      "html": "<label class=\"ds-switch\"><input type=\"checkbox\" class=\"--icon-lightning\" /><span>Icon on state only</span></label>"
    },
    {
      "name": "dual-icons",
      "html": "<label class=\"ds-switch --icon-cloud\"><input type=\"checkbox\" class=\"--icon-lightning\" /><span>Different on/off icons</span></label>"
    },
    {
      "name": "hide-label",
      "html": "<label class=\"ds-switch --hide-label\"><input type=\"checkbox\" /><span>Hidden label</span></label>"
    },
    {
      "name": "left-label",
      "html": "<label class=\"ds-switch --left-label\"><input type=\"checkbox\" /><span>Left label</span></label>"
    },
    {
      "name": "left-right-labels",
      "html": "<label class=\"ds-switch\"><input type=\"checkbox\" /><span>Off</span><span>On</span></label>"
    },
    {
      "name": "multi-radio",
      "html": "<div class=\"ds-switch\"><label><input type=\"radio\" name=\"group\" value=\"a\" checked /><span>Option A</span></label><label><input type=\"radio\" name=\"group\" value=\"b\" /><span>Option B</span></label><label><input type=\"radio\" name=\"group\" value=\"c\" /><span>Option C</span></label></div>"
    },
    {
      "name": "theme",
      "html": "<div class=\"ds-switch --theme --hide-label\"><label class=\"--icon-light-mode\"><input type=\"radio\" name=\"theme\" value=\"light\" /><span>Light</span></label><label class=\"--icon-contrast\"><input type=\"radio\" name=\"theme\" value=\"system\" checked /><span>System</span></label><label class=\"--icon-dark-mode\"><input type=\"radio\" name=\"theme\" value=\"dark\" /><span>Dark</span></label></div>"
    },
    {
      "name": "disabled",
      "html": "<label class=\"ds-switch\"><input type=\"checkbox\" disabled /><span>Disabled</span></label>"
    }
  ]
}