{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "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"
    }
  },
  "structure": {
    "requiredChildren": [
      "div"
    ],
    "parts": {
      "group": {
        "element": "div",
        "required": true,
        "repeatable": true
      },
      "endGroup": {
        "element": "div",
        "selector": ".--end",
        "optional": true,
        "position": [
          "last"
        ]
      }
    },
    "patterns": {
      "basic": "<section class=\"ds-controls\"><div><button class=\"ds-button --primary\" type=\"button\"><span>{primary}</span></button><button class=\"ds-button\" type=\"button\"><span>{secondary}</span></button></div></section>",
      "split": "<section class=\"ds-controls --spaced\"><div>{start}</div><div>{end}</div></section>"
    }
  },
  "attributes": {},
  "dataAttributes": [],
  "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>"
    }
  ]
}