{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "accordion",
  "name": "Accordion",
  "category": "Data display",
  "description": "Stacked disclosure sections. Native <details>; give them the same name for exclusive open.",
  "tags": [
    "accordion",
    "faq",
    "disclosure",
    "expand",
    "collapse",
    "details"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "collapsible sections",
      "expand collapse",
      "details list",
      "product details accordion"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "faq",
      "tabs"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/accordion",
  "markdownUrl": "https://mian.ro/ai/components/accordion.md",
  "classes": [
    {
      "name": "mn-accordion",
      "description": "Container of <details>."
    },
    {
      "name": "mn-accordion-content",
      "description": "Panel content."
    },
    {
      "name": "details name=\"…\"",
      "description": "Same name = only one open at a time. Native, no JS."
    }
  ],
  "accessibility": [
    "<details>/<summary> are keyboard and screen-reader operable natively, and the browser can find text inside closed panels."
  ],
  "examples": [
    {
      "title": "FAQ (exclusive)",
      "description": null,
      "html": "<div class=\"mn-accordion\" style=\"max-width:34rem\">\n  <details name=\"faq\" open><summary>Is MIAN free to use?</summary><div class=\"mn-accordion-content\">Yes, for general and personal use. For commercial use, contact BTN GROUP SRL through the contact page.</div></details>\n  <details name=\"faq\"><summary>Do I need React?</summary><div class=\"mn-accordion-content\">No. MIAN is HTML, CSS and one small script. It works in React, Vue, Laravel, WordPress or plain HTML.</div></details>\n  <details name=\"faq\"><summary>Can I make my own noodle?</summary><div class=\"mn-accordion-content\">Yes: a noodle is a set of CSS custom properties. Copy one and change the values.</div></details>\n</div>"
    }
  ],
  "css": ".mn-accordion { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }\n.mn-accordion > details + details { border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-accordion summary, .mn-collapse > summary {\n  display: flex; align-items: center; justify-content: space-between; gap: 1rem;\n  padding: 1rem 1.15rem; cursor: pointer; list-style: none;\n  font: 550 var(--mn-text-sm)/1.4 var(--mn-font);\n}\n.mn-accordion summary::-webkit-details-marker, .mn-collapse > summary::-webkit-details-marker { display: none; }\n.mn-accordion summary::after, .mn-collapse > summary::after {\n  content: \"\"; width: .5rem; height: .5rem; flex: none; margin-inline-end: .2rem;\n  border-right: 1.5px solid var(--mn-muted); border-bottom: 1.5px solid var(--mn-muted);\n  transform: translateY(-2px) rotate(45deg); transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-accordion details[open] > summary::after, .mn-collapse[open] > summary::after { transform: translateY(2px) rotate(225deg); }\n.mn-accordion summary:hover, .mn-collapse > summary:hover { background: var(--mn-hover); }\n.mn-accordion summary:focus-visible, .mn-collapse > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-accordion-content { padding: 0 1.15rem 1.1rem; font-size: var(--mn-text-sm); line-height: 1.65; color: var(--mn-muted); }\n.mn-accordion details::details-content { transition: content-visibility var(--mn-duration) allow-discrete, height var(--mn-duration) var(--mn-ease); height: 0; overflow: clip; }\n.mn-accordion details[open]::details-content { height: auto; }\n@supports (interpolate-size: allow-keywords) { .mn-accordion { interpolate-size: allow-keywords; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/accordion.json"
  }
}