AccordionItem.astro

---
interface Props {
  header: string
  children: any
}

const { header } = Astro.props
---

<li class="accordion__item">
  <h3>
    <button
      id="accordion-header-1"
      class="accordion__header"
      aria-expanded="false"
      aria-controls="accordion-panel-1"
      onclick="toggleAccordionItem()"
    >
      {header}
      <svg class="header__toggle-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path
          fill="currentColor"
          d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
        ></path>
      </svg>
    </button>
  </h3>
  <div id="accordion-panel-1" role="region" class="accordion__panel" aria-labelledby="accordion-header-1">
    <div class="panel__inner">
      <slot />
    </div>
  </div>
</li>

<style is:global>
  .accordion__item,
  .accordion__header {
    width: 100%;
  }

  .accordion__header {
    display: flex;
    justify-content: space-between;
    border: 2px solid #202020;
    padding: 1rem;
  }

  .accordion__item .accordion__header {
    border-bottom: 0;
  }

  .accordion__item .accordion__header:focus {
    outline-offset: -6px;
    box-shadow: inset 0 0 0 2px white;
  }

  .accordion__item:only-of-type .accordion__header,
  .accordion__item:last-of-type .accordion__header {
    border: 2px solid #202020;
  }

  .accordion__item:only-of-type .accordion__panel,
  .accordion__item:last-of-type .accordion__panel {
    border-bottom: 2px solid #202020;
  }

  .header__toggle-indicator {
    width: 20px;
  }

  .accordion__panel {
    visibility: hidden;
    overflow: hidden;
    height: 0;
    border-left: 2px solid #202020;
    border-right: 2px solid #202020;
    transition: height 0.3s ease-in-out, visibility 0s 0.3s;
  }

  .panel__inner {
    padding: 2rem 1rem;
  }

  .is-active .accordion__header {
    border: 2px solid #202020;
  }

  .is-active .accordion__panel {
    visibility: visible;
    height: auto;
    transition: height 0.3s ease-in-out, visibility 0s 0s;
  }
</style>