{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-radio",
  "description": "Radio button input component",
  "docUrl": "https://design.soracom.io/design-system/elements/radio/",
  "category": "elements",
  "htmlElements": [
    "label",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--small",
        "--medium",
        "--large"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "state": {
      "support": "subset",
      "values": [
        "--disabled"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--panel",
        "--panel-simple",
        "--dots",
        "--swatch",
        "--round",
        "--square",
        "--hide-label",
        "--image",
        "--fee"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-radio-color",
      "description": "Custom swatch color used by the --swatch variant"
    }
  ],
  "structure": {
    "parts": {
      "control": {
        "element": "input",
        "selector": "input[type=\"radio\"]",
        "attributes": {
          "type": "radio"
        },
        "optional": true,
        "position": [
          "first"
        ]
      },
      "label": {
        "element": "div",
        "alternativeElements": [
          "span"
        ],
        "optional": true,
        "position": [
          "after control"
        ]
      },
      "option": {
        "element": "label",
        "optional": true,
        "repeatable": true
      }
    },
    "patterns": {
      "single": "<label class=\"ds-radio\"><input type=\"radio\" name=\"{name}\"><div>{label}</div></label>",
      "group": "<div class=\"ds-radio --panel\"><label><input type=\"radio\" name=\"{name}\"><div>{label}</div></label><label><input type=\"radio\" name=\"{name}\"><div>{label}</div></label></div>"
    }
  },
  "attributes": {},
  "dataAttributes": [
    {
      "name": "data-ds-message",
      "description": "Message text that hides the radio contents and renders the SDS message state.",
      "valueType": "string"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<label class=\"ds-radio\"><input type=\"radio\" name=\"group\" /><div>Radio option</div></label>"
    },
    {
      "name": "checked",
      "html": "<label class=\"ds-radio\"><input type=\"radio\" name=\"group\" checked /><div>Selected option</div></label>"
    },
    {
      "name": "small",
      "html": "<label class=\"ds-radio --small\"><input type=\"radio\" name=\"group\" /><div>Small</div></label>"
    },
    {
      "name": "large",
      "html": "<label class=\"ds-radio --large\"><input type=\"radio\" name=\"group\" /><div>Large</div></label>"
    },
    {
      "name": "alert",
      "html": "<label class=\"ds-radio --alert\"><input type=\"radio\" name=\"group\" checked /><div>Alert</div></label>"
    },
    {
      "name": "success",
      "html": "<label class=\"ds-radio --success\"><input type=\"radio\" name=\"group\" checked /><div>Success</div></label>"
    },
    {
      "name": "color-blue",
      "html": "<label class=\"ds-radio --color-blue\"><input type=\"radio\" name=\"group\" checked /><div>Blue</div></label>"
    },
    {
      "name": "color-purple",
      "html": "<label class=\"ds-radio --color-purple\"><input type=\"radio\" name=\"group\" checked /><div>Purple</div></label>"
    },
    {
      "name": "with-icon",
      "html": "<label class=\"ds-radio --icon-rocket\"><input type=\"radio\" name=\"group\" /><div>With icon</div></label>"
    },
    {
      "name": "panel",
      "html": "<label class=\"ds-radio --panel\"><input type=\"radio\" name=\"group\" /><div>Panel radio</div></label>"
    },
    {
      "name": "panel-simple",
      "html": "<label class=\"ds-radio --panel-simple\"><input type=\"radio\" name=\"group\" /><div>Simple panel</div></label>"
    },
    {
      "name": "dots",
      "html": "<label class=\"ds-radio --dots\"><input type=\"radio\" name=\"group\" /><div>A</div></label>"
    },
    {
      "name": "swatch",
      "html": "<label class=\"ds-radio --swatch\"><input type=\"radio\" name=\"group\" /><div>A</div></label>"
    },
    {
      "name": "square",
      "html": "<label class=\"ds-radio --square\"><input type=\"radio\" name=\"group\" /><div>A</div></label>"
    },
    {
      "name": "hide-label",
      "html": "<label class=\"ds-radio --hide-label --tip-right\"><input type=\"radio\" name=\"group\" /><div>Tooltip text</div></label>"
    },
    {
      "name": "disabled",
      "html": "<label class=\"ds-radio\"><input type=\"radio\" name=\"group\" disabled /><div>Disabled</div></label>"
    }
  ]
}