Accordion

<%# Markup for the accordion (APG Accordion) demo.
    stimeo--accordion manages each header's aria-expanded and each panel's hidden,
    and allows multiple panels open at once. Arrow keys move focus between headers.
    Headers and panels are linked via aria-controls (= the panel's id), and each
    panel (role="region") references its header button's id via aria-labelledby. %>
<div class="accordion" data-controller="stimeo--accordion">
  <h3 class="accordion__header">
    <button type="button" id="acc-shipping-trigger" class="accordion__trigger"
            aria-expanded="false" aria-controls="acc-shipping"
            data-stimeo--accordion-target="trigger"
            data-action="click->stimeo--accordion#toggle
                         keydown->stimeo--accordion#onKeydown"><%= t(
              "components.accordion.demo.shipping_title"
            ) %></button>
  </h3>
  <div class="accordion__panel" id="acc-shipping" role="region"
       aria-labelledby="acc-shipping-trigger"
       data-stimeo--accordion-target="panel" hidden>
    <p><%= t("components.accordion.demo.shipping_desc") %></p>
  </div>

  <h3 class="accordion__header">
    <button type="button" id="acc-returns-trigger" class="accordion__trigger"
            aria-expanded="false" aria-controls="acc-returns"
            data-stimeo--accordion-target="trigger"
            data-action="click->stimeo--accordion#toggle
                         keydown->stimeo--accordion#onKeydown"><%= t(
              "components.accordion.demo.returns_title"
            ) %></button>
  </h3>
  <div class="accordion__panel" id="acc-returns" role="region"
       aria-labelledby="acc-returns-trigger"
       data-stimeo--accordion-target="panel" hidden>
    <p><%= t("components.accordion.demo.returns_desc") %></p>
  </div>

  <h3 class="accordion__header">
    <button type="button" id="acc-warranty-trigger" class="accordion__trigger"
            aria-expanded="false" aria-controls="acc-warranty"
            data-stimeo--accordion-target="trigger"
            data-action="click->stimeo--accordion#toggle
                         keydown->stimeo--accordion#onKeydown"><%= t(
              "components.accordion.demo.warranty_title"
            ) %></button>
  </h3>
  <div class="accordion__panel" id="acc-warranty" role="region"
       aria-labelledby="acc-warranty-trigger"
       data-stimeo--accordion-target="panel" hidden>
    <p><%= t("components.accordion.demo.warranty_desc") %></p>
  </div>
</div>

/*
 * Presentation-only styles for the accordion demo.
 * Open/closed state is expressed via aria-expanded (set by the library).
 */

.accordion {
  width: min(28rem, 100%);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}

.accordion__header {
  margin: 0;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  background: var(--surface-card);
  border: 0;
  border-bottom: 1px solid var(--border);
}

/* Show "−" on open headers and "+" on closed ones. */
.accordion__trigger::after {
  content: "+";
  color: var(--muted);
}

.accordion__trigger[aria-expanded="true"]::after {
  content: "\2212";
}

.accordion__panel {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.accordion__panel:last-child,
.accordion__header:last-of-type .accordion__trigger {
  border-bottom: 0;
}