{
  "name": "ds-tabs",
  "description": "Tab navigation component",
  "docUrl": "https://design.soracom.io/design-system/elements/tabs/",
  "category": "elements",
  "htmlElements": [
    "div",
    "ul"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": [
      "--card",
      "--panel",
      "--vertical",
      "--sticky",
      "--no-wrap",
      "--adjust-height"
    ],
    "size": [
      "--small"
    ],
    "indent": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-tabs\"><input id=\"tab-1\" type=\"radio\" name=\"tabs\" checked><input id=\"tab-2\" type=\"radio\" name=\"tabs\"><input id=\"tab-3\" type=\"radio\" name=\"tabs\"><ul role=\"tablist\"><li role=\"tab\"><label for=\"tab-1\">Tab 1</label></li><li role=\"tab\"><label for=\"tab-2\">Tab 2</label></li><li role=\"tab\"><label for=\"tab-3\">Tab 3</label></li></ul><div class=\"__1\" role=\"tabpanel\"><p>Tab 1 content</p></div><div class=\"__2\" role=\"tabpanel\"><p>Tab 2 content</p></div><div class=\"__3\" role=\"tabpanel\"><p>Tab 3 content</p></div></div>"
    },
    {
      "name": "card",
      "html": "<div class=\"ds-tabs --card\"><input id=\"card-1\" type=\"radio\" name=\"card-tabs\" checked><input id=\"card-2\" type=\"radio\" name=\"card-tabs\"><ul role=\"tablist\"><li role=\"tab\"><label for=\"card-1\">Tab 1</label></li><li role=\"tab\"><label for=\"card-2\">Tab 2</label></li></ul><div class=\"__1\" role=\"tabpanel\"><p>Card-style tab content</p></div><div class=\"__2\" role=\"tabpanel\"><p>Tab 2 content</p></div></div>"
    },
    {
      "name": "panel",
      "html": "<div class=\"ds-tabs --panel\"><input id=\"panel-1\" type=\"radio\" name=\"panel-tabs\" checked><input id=\"panel-2\" type=\"radio\" name=\"panel-tabs\"><ul role=\"tablist\"><li role=\"tab\"><label for=\"panel-1\">Tab 1</label></li><li role=\"tab\"><label for=\"panel-2\">Tab 2</label></li></ul><div class=\"__1\" role=\"tabpanel\"><p>Panel-style tab content</p></div><div class=\"__2\" role=\"tabpanel\"><p>Tab 2 content</p></div></div>"
    },
    {
      "name": "vertical",
      "html": "<div class=\"ds-tabs --vertical\"><input id=\"vert-1\" type=\"radio\" name=\"vert-tabs\" checked><input id=\"vert-2\" type=\"radio\" name=\"vert-tabs\"><input id=\"vert-3\" type=\"radio\" name=\"vert-tabs\"><ul role=\"tablist\"><li role=\"tab\"><label for=\"vert-1\">Tab 1</label></li><li role=\"tab\"><label for=\"vert-2\">Tab 2</label></li><li role=\"tab\"><label for=\"vert-3\">Tab 3</label></li></ul><div class=\"__1\" role=\"tabpanel\"><p>Vertical tab content</p></div><div class=\"__2\" role=\"tabpanel\"><p>Tab 2 content</p></div><div class=\"__3\" role=\"tabpanel\"><p>Tab 3 content</p></div></div>"
    },
    {
      "name": "small",
      "html": "<div class=\"ds-tabs --small\"><input id=\"sm-1\" type=\"radio\" name=\"sm-tabs\" checked><input id=\"sm-2\" type=\"radio\" name=\"sm-tabs\"><ul role=\"tablist\"><li role=\"tab\"><label for=\"sm-1\">Tab 1</label></li><li role=\"tab\"><label for=\"sm-2\">Tab 2</label></li></ul><div class=\"__1\" role=\"tabpanel\"><p>Small tabs content</p></div><div class=\"__2\" role=\"tabpanel\"><p>Tab 2 content</p></div></div>"
    },
    {
      "name": "sticky",
      "html": "<div class=\"ds-tabs\"><input id=\"sticky-1\" type=\"radio\" name=\"sticky-tabs\" checked><input id=\"sticky-2\" type=\"radio\" name=\"sticky-tabs\"><ul class=\"--sticky --offset-60\" role=\"tablist\"><li role=\"tab\"><label for=\"sticky-1\">Tab 1</label></li><li role=\"tab\"><label for=\"sticky-2\">Tab 2</label></li></ul><div class=\"__1\" role=\"tabpanel\"><p>Sticky tab list content</p></div><div class=\"__2\" role=\"tabpanel\"><p>Tab 2 content</p></div></div>"
    },
    {
      "name": "tab-bar",
      "html": "<ul class=\"ds-tabs\" role=\"tablist\"><li role=\"tab\" class=\"--selected\"><span>Label One</span></li><li role=\"tab\"><span>Label Two</span></li><li role=\"tab\"><span>Label Three</span></li></ul>"
    }
  ]
}