{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:ui",
  "title": "Accordion (MIAN)",
  "description": "Stacked disclosure sections. Native <details>; give them the same name for exclusive open.",
  "categories": [
    "data display",
    "accordion",
    "faq",
    "disclosure",
    "expand"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/accordion.css",
      "type": "registry:file",
      "target": "mian/components/accordion.css",
      "content": ".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; } }"
    },
    {
      "path": "mian/examples/accordion.html",
      "type": "registry:file",
      "target": "mian/examples/accordion.html",
      "content": "<!-- FAQ (exclusive) -->\n<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>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/accordion",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-accordion",
        "mn-accordion-content",
        "details name=\"…\""
      ],
      "accessibility": [
        "<details>/<summary> are keyboard and screen-reader operable natively, and the browser can find text inside closed panels."
      ],
      "intents": [
        "collapsible sections",
        "expand collapse",
        "details list",
        "product details accordion"
      ]
    }
  }
}