{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "tabs",
    "type": "registry:component",
    "title": "Tabs",
    "description": "Tabbed panels that switch without JavaScript, driven by hidden radios. Supports up to five tabs.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Navigation",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/tabs.html",
            "type": "registry:file",
            "target": "components/tabs.html",
            "content": "<!-- Tabs\n     Works without JavaScript. Put the radios first (shared name, one checked),\n     then the labels in .dp-tablist, then the panels in .dp-tabpanels. Keep\n     label and panel order in step. Use a unique name per tabs instance. -->\n\n<div class=\"dp-tabs\">\n  <input class=\"dp-tab-radio\" type=\"radio\" name=\"dp-tabs-demo\" id=\"dp-tab-1\" checked />\n  <input class=\"dp-tab-radio\" type=\"radio\" name=\"dp-tabs-demo\" id=\"dp-tab-2\" />\n  <input class=\"dp-tab-radio\" type=\"radio\" name=\"dp-tabs-demo\" id=\"dp-tab-3\" />\n\n  <div class=\"dp-tablist\" role=\"tablist\">\n    <label class=\"dp-tab\" for=\"dp-tab-1\">Discover</label>\n    <label class=\"dp-tab\" for=\"dp-tab-2\">Map</label>\n    <label class=\"dp-tab\" for=\"dp-tab-3\">Analyze</label>\n  </div>\n\n  <div class=\"dp-tabpanels\">\n    <div class=\"dp-tabpanel\" role=\"tabpanel\">\n      Search 400M domains by technology, content and company attributes.\n    </div>\n    <div class=\"dp-tabpanel\" role=\"tabpanel\">\n      Plot company and technology adoption across regions.\n    </div>\n    <div class=\"dp-tabpanel\" role=\"tabpanel\">\n      Build reports on trends, links and ownership over time.\n    </div>\n  </div>\n</div>\n"
        },
        {
            "path": "components/tabs.css",
            "type": "registry:file",
            "target": "components/tabs.css",
            "content": "/* Tabs\n   A tabbed panel that works without JavaScript. Hidden radios (one group via a\n   shared name) drive which label is active and which panel shows. Supports up\n   to five tabs. Colour and type come from tokens.css.\n\n   Structure: radios first, then .dp-tablist (labels), then .dp-tabpanels\n   (panels). Match each label's `for` to a radio id, and keep label and panel\n   order in step. */\n\n.dp-tabs {\n  display: block;\n}\n\n.dp-tab-radio {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.dp-tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dp-space-1);\n  border-bottom: 1px solid var(--dp-border);\n}\n\n.dp-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dp-space-2);\n  padding: var(--dp-space-3) var(--dp-space-4);\n  font-weight: var(--dp-weight-bold);\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition: color var(--dp-transition), border-color var(--dp-transition);\n}\n\n.dp-tab:hover {\n  color: var(--dp-navy);\n}\n\n.dp-tabpanels {\n  padding-top: var(--dp-space-5);\n}\n\n.dp-tabpanel {\n  display: none;\n  color: var(--dp-text-muted);\n}\n\n/* Show the panel whose index matches the checked radio */\n.dp-tab-radio:nth-of-type(1):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(1),\n.dp-tab-radio:nth-of-type(2):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(2),\n.dp-tab-radio:nth-of-type(3):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(3),\n.dp-tab-radio:nth-of-type(4):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(4),\n.dp-tab-radio:nth-of-type(5):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(5) {\n  display: block;\n}\n\n/* Mark the matching label active */\n.dp-tab-radio:nth-of-type(1):checked ~ .dp-tablist .dp-tab:nth-child(1),\n.dp-tab-radio:nth-of-type(2):checked ~ .dp-tablist .dp-tab:nth-child(2),\n.dp-tab-radio:nth-of-type(3):checked ~ .dp-tablist .dp-tab:nth-child(3),\n.dp-tab-radio:nth-of-type(4):checked ~ .dp-tablist .dp-tab:nth-child(4),\n.dp-tab-radio:nth-of-type(5):checked ~ .dp-tablist .dp-tab:nth-child(5) {\n  color: var(--dp-navy);\n  border-bottom-color: var(--dp-blue-700);\n}\n\n/* Keyboard focus ring on the matching label */\n.dp-tab-radio:nth-of-type(1):focus-visible ~ .dp-tablist .dp-tab:nth-child(1),\n.dp-tab-radio:nth-of-type(2):focus-visible ~ .dp-tablist .dp-tab:nth-child(2),\n.dp-tab-radio:nth-of-type(3):focus-visible ~ .dp-tablist .dp-tab:nth-child(3),\n.dp-tab-radio:nth-of-type(4):focus-visible ~ .dp-tablist .dp-tab:nth-child(4),\n.dp-tab-radio:nth-of-type(5):focus-visible ~ .dp-tablist .dp-tab:nth-child(5) {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n  border-radius: var(--dp-radius-xs) var(--dp-radius-xs) 0 0;\n}\n"
        }
    ]
}