{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "accordion",
    "type": "registry:component",
    "title": "Accordion",
    "description": "Expandable sections built from native details and summary, so they work without JavaScript. The chevron rotates when open.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Layout & overlay",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/accordion.html",
            "type": "registry:file",
            "target": "components/accordion.html",
            "content": "<!-- Accordion\n     Native details and summary, so it works without JavaScript. Add the open\n     attribute to a details to start it expanded. Group sections in\n     .dp-accordion. -->\n\n<div class=\"dp-accordion\">\n  <details open>\n    <summary>\n      What is in the dataset\n      <svg class=\"dp-accordion-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m6 9 6 6 6-6\"></path>\n      </svg>\n    </summary>\n    <div class=\"dp-accordion-content\">\n      Structured records for 400M domains, refreshed monthly across every TLD.\n    </div>\n  </details>\n\n  <details>\n    <summary>\n      How often is it updated\n      <svg class=\"dp-accordion-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m6 9 6 6 6-6\"></path>\n      </svg>\n    </summary>\n    <div class=\"dp-accordion-content\">\n      The full dataset is rebuilt on the first of each month.\n    </div>\n  </details>\n\n  <details>\n    <summary>\n      Which formats can I export\n      <svg class=\"dp-accordion-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m6 9 6 6 6-6\"></path>\n      </svg>\n    </summary>\n    <div class=\"dp-accordion-content\">\n      CSV and JSON are available on every plan.\n    </div>\n  </details>\n</div>\n"
        },
        {
            "path": "components/accordion.css",
            "type": "registry:file",
            "target": "components/accordion.css",
            "content": "/* Accordion\n   Expandable sections built from native details and summary, so they work\n   without JavaScript. Group sections in .dp-accordion. Colour and type from\n   tokens.css. */\n\n.dp-accordion {\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-lg);\n  overflow: hidden;\n  background: var(--dp-surface);\n}\n\n.dp-accordion details {\n  border-bottom: 1px solid var(--dp-border);\n}\n\n.dp-accordion details:last-child {\n  border-bottom: 0;\n}\n\n.dp-accordion summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dp-space-3);\n  padding: var(--dp-space-4) var(--dp-space-5);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n  cursor: pointer;\n  list-style: none;\n}\n\n.dp-accordion summary::-webkit-details-marker {\n  display: none;\n}\n\n.dp-accordion summary:hover {\n  background: var(--dp-surface-subtle);\n}\n\n.dp-accordion summary:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 2px var(--dp-blue-300);\n}\n\n.dp-accordion-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  flex: none;\n  color: var(--dp-text-muted);\n  transition: transform var(--dp-transition);\n}\n\n.dp-accordion details[open] summary .dp-accordion-icon {\n  transform: rotate(180deg);\n}\n\n.dp-accordion-content {\n  padding: 0 var(--dp-space-5) var(--dp-space-5);\n  color: var(--dp-text-muted);\n  font-size: var(--dp-text-sm);\n}\n"
        }
    ]
}