{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "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": {
      "support": "custom",
      "values": [
        "--card",
        "--panel",
        "--vertical",
        "--sticky",
        "--no-wrap",
        "--adjust-height"
      ]
    },
    "size": {
      "support": "subset",
      "values": [
        "--small"
      ]
    },
    "indent": {
      "support": "all"
    }
  },
  "structure": {
    "parts": {
      "control": {
        "element": "input",
        "selector": "input[type=\"radio\"]",
        "attributes": {
          "type": "radio"
        },
        "optional": true,
        "repeatable": true
      },
      "tablist": {
        "element": "ul",
        "alternativeElements": [
          "div"
        ],
        "selector": "[role=\"tablist\"], ul",
        "required": true
      },
      "tab": {
        "element": "li",
        "alternativeElements": [
          "button"
        ],
        "selector": "[role=\"tab\"], li",
        "required": true,
        "repeatable": true
      },
      "panel": {
        "element": "div",
        "selector": "[role=\"tabpanel\"], [class*=\"__content\"]",
        "optional": true,
        "repeatable": true
      }
    },
    "patterns": {
      "panels": "<div class=\"ds-tabs\"><input id=\"{id}-1\" type=\"radio\" name=\"{name}\" checked><input id=\"{id}-2\" type=\"radio\" name=\"{name}\"><ul role=\"tablist\"><li role=\"tab\"><label for=\"{id}-1\">{tab}</label></li><li role=\"tab\"><label for=\"{id}-2\">{tab}</label></li></ul><div class=\"__1\" role=\"tabpanel\">{content}</div><div class=\"__2\" role=\"tabpanel\">{content}</div></div>",
      "bar": "<ul class=\"ds-tabs\" role=\"tablist\"><li class=\"--selected\" role=\"tab\"><span>{tab}</span></li><li role=\"tab\"><span>{tab}</span></li></ul>"
    }
  },
  "attributes": {
    "type": {
      "description": "Required native input type for a CSS-driven tab control.",
      "values": [
        "radio"
      ],
      "default": "radio",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "name": {
      "description": "Shared form field name that groups the tab controls.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "value": {
      "description": "Value associated with a tab control when it is selected.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "checked": {
      "description": "Selects the corresponding tab and panel.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "disabled": {
      "description": "Disables the corresponding tab control.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "accessibility": {
    "roleContracts": [
      {
        "name": "tablist",
        "description": "Groups the tab controls.",
        "required": true,
        "appliesTo": [
          {
            "part": "tablist",
            "elements": [
              "ul",
              "div"
            ]
          }
        ]
      },
      {
        "name": "tab",
        "description": "Identifies an individual tab control.",
        "required": true,
        "appliesTo": [
          {
            "part": "tab",
            "elements": [
              "li",
              "button"
            ]
          }
        ]
      },
      {
        "name": "tabpanel",
        "description": "Identifies content controlled by a tab.",
        "required": true,
        "appliesTo": [
          {
            "part": "panel",
            "elements": [
              "div"
            ]
          }
        ]
      }
    ],
    "ariaAttributeContracts": [
      {
        "name": "aria-label",
        "description": "Provides an accessible name for the tab list when no visible label is available.",
        "appliesTo": [
          {
            "part": "tablist",
            "elements": [
              "ul",
              "div"
            ]
          }
        ]
      },
      {
        "name": "aria-labelledby",
        "description": "References the element that labels a tab list or tab panel.",
        "appliesTo": [
          {
            "part": "tablist",
            "elements": [
              "ul",
              "div"
            ]
          },
          {
            "part": "panel",
            "elements": [
              "div"
            ]
          }
        ]
      },
      {
        "name": "aria-selected",
        "description": "Reports whether a tab is currently selected.",
        "values": [
          "true",
          "false"
        ],
        "appliesTo": [
          {
            "part": "tab",
            "elements": [
              "li",
              "button"
            ]
          }
        ]
      },
      {
        "name": "aria-controls",
        "description": "References the tab panel controlled by a tab.",
        "appliesTo": [
          {
            "part": "tab",
            "elements": [
              "li",
              "button"
            ]
          }
        ]
      },
      {
        "name": "aria-orientation",
        "description": "Describes whether the tab list is horizontal or vertical.",
        "values": [
          "horizontal",
          "vertical"
        ],
        "appliesTo": [
          {
            "part": "tablist",
            "elements": [
              "ul",
              "div"
            ]
          }
        ]
      }
    ],
    "notes": [
      "When using ARIA tab semantics, application code must keep aria-selected, aria-controls, panel visibility, and roving tabindex in sync.",
      "Implement Left/Right Arrow navigation for horizontal tabs and Up/Down Arrow navigation for vertical tabs.",
      "The CSS radio pattern controls visual selection only; it does not implement the complete ARIA keyboard interaction model."
    ]
  },
  "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>"
    }
  ]
}