{
  "name": "ds-controls",
  "description": "Control group container",
  "docUrl": "https://design.soracom.io/design-system/containers/controls/",
  "category": "containers",
  "htmlElements": [
    "section",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--plain"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--end",
        "--center",
        "--spaced",
        "--distributed",
        "--reverse"
      ]
    },
    "indent": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<section class=\"ds-controls\"><div><button class=\"ds-button --primary\"><span>Save</span></button><button class=\"ds-button --plain\"><span>Cancel</span></button></div></section>"
    },
    {
      "name": "plain",
      "html": "<section class=\"ds-controls --plain\"><div><button class=\"ds-button --primary\"><span>Save</span></button><button class=\"ds-button --plain\"><span>Cancel</span></button></div></section>"
    },
    {
      "name": "end",
      "html": "<section class=\"ds-controls --end\"><div><button class=\"ds-button --primary\"><span>Submit</span></button></div></section>"
    },
    {
      "name": "spaced",
      "html": "<section class=\"ds-controls --spaced\"><div><button class=\"ds-button --plain\"><span>Back</span></button></div><div><button class=\"ds-button --primary\"><span>Next</span></button></div></section>"
    }
  ]
}