{
  "name": "accordion",
  "type": "registry:component",
  "description": "Accordions for collapsible content sections",
  "files": [
    {
      "path": "ui/Accordion.astro",
      "type": "registry:component",
      "content": "---\n// 参考にした記事\n// https://ics.media/entry/220901/\n\nimport { Icon } from 'astro-icon/components';\nconst { name } = Astro.props;\n---\n\n<details name={name} class=\"accordion-item group\">\n  <summary\n    class=\"accordion-question relative flex w-full cursor-pointer items-center justify-between gap-4 overflow-visible rounded-[var(--sp-radius-card)] p-4 text-left text-base transition-all duration-300 md:gap-6 md:text-lg\"\n  >\n    <span class=\"question-text flex-1\">\n      <slot name=\"trigger\">Question</slot>\n    </span>\n    <Icon\n      name=\"lucide:chevron-down\"\n      class=\"question-icon h-5 w-5 flex-shrink-0 transform opacity-40 transition-all duration-300 group-open:rotate-180\"\n    />\n  </summary>\n\n  <div\n    class=\"accordion-answer grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-[280ms] ease-in-out group-open:grid-rows-[1fr]\"\n  >\n    <div\n      class=\"answer-content min-h-0 px-4 pb-4 pt-0 text-base transition-opacity duration-200 md:text-lg\"\n    >\n      <slot name=\"content\">\n        <p>Answer</p>\n      </slot>\n    </div>\n  </div>\n</details>\n\n<style>\n  /* Hide default details marker and noise background without Tailwind */\n  .accordion-question::-webkit-details-marker {\n    display: none;\n  }\n\n  /* Chrome/Edge: True height animation with ::details-content */\n  @supports selector(details::details-content) {\n    .accordion-answer {\n      display: block;\n      overflow: clip;\n    }\n    .accordion-item::details-content {\n      display: block;\n      height: 0;\n      opacity: 0;\n      overflow: clip;\n      content-visibility: hidden;\n      transition-property: height, opacity, content-visibility;\n      transition-duration: 0.28s, 0.2s, 0.28s;\n      transition-timing-function: ease, ease, ease;\n      transition-behavior: allow-discrete;\n      interpolate-size: allow-keywords;\n    }\n    .accordion-item[open]::details-content {\n      height: auto;\n      opacity: 1;\n      content-visibility: visible;\n    }\n  }\n</style>\n"
    }
  ],
  "category": "ui"
}