basecoat/docs/_includes/components/accordion.njk

<section id="accordion" class="w-full rounded-lg border scroll-mt-16">
  <header class="border-b px-4 py-3">
    <h2 class="text-sm font-medium">Accordion</h2>
  </header>
  <div class="p-4">
    <div class="group grid w-full max-w-xl gap-4">
      <section
        x-init
        @click="
          const clickedSummary = $event.target.closest('summary');
          if (!clickedSummary) return;
          const clickedDetails = clickedSummary.closest('details');
          if (!clickedDetails) return;
          $el.querySelectorAll('details').forEach(detailsEl => {
            if (detailsEl !== clickedDetails) {
              detailsEl.removeAttribute('open');
            }
          });
        "
      >
        <details class="group border-b last:border-b-0">
          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
              Is it accessible?
              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
            </h2>
          </summary>
          <section class="pb-4">
            <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
          </section>
        </details>
        <details class="group border-b last:border-b-0">
          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
              Is it styled?
              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
            </h2>
          </summary>
          <section class="pb-4">
            <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
          </section>
        </details>
        <details class="group border-b last:border-b-0">
          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
              Is it animated?
              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
            </h2>
          </summary>
          <section>
            <p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
          </section>
        </details>
      </section>
      <section
        x-init
        @click="
          const clickedSummary = $event.target.closest('summary');
          if (!clickedSummary) return;
          const clickedDetails = clickedSummary.closest('details');
          if (!clickedDetails) return;
          $el.querySelectorAll('details').forEach(detailsEl => {
            if (detailsEl !== clickedDetails) {
              detailsEl.removeAttribute('open');
            }
          });
        "
      >
        <details class="group border-b last:border-b-0">
          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
              What are the key considerations when implementing a comprehensive enterprise-level authentication system?
              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
            </h2>
          </summary>
          <section class="pb-4">
            <p class="text-sm">Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.</p>
          </section>
        </details>
        <details class="group">
          <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
            <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
              How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?
              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
            </h2>
          </summary>
          <section>
            <p class="text-sm">Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.</p>
          </section>
        </details>
      </section>
    </div>
  </div>
</section>