Accordion

<.accordion>
  <:item title="Is it accessible?" value="item-1">
    Yes. It adheres to the WAI-ARIA design pattern.
  </:item>
  <:item title="Is it styled?" value="item-2">
    Yes. It comes with default styles.
  </:item>
  <:item title="Is it animated?" value="item-3">
    Yes. It's animated by default.
  </:item>
</.accordion>

<.accordion default_value="faq-2">
  <:item title="What is your refund policy?" value="faq-1">
    We offer a 30-day money-back guarantee.
  </:item>
  <:item title="How do I contact support?" value="faq-2">
    Reach us at support@example.com.
  </:item>
</.accordion>

<.accordion type="multiple" default_value={["spec-1", "spec-3"]}>
  <:item title="Dimensions" value="spec-1">
    Height: 42mm, Width: 36mm
  </:item>
  <:item title="Weight" value="spec-2">
    Aluminum: 38.8g
  </:item>
  <:item title="Display" value="spec-3">
    OLED Retina display
  </:item>
</.accordion>

<.accordion>
  <:item title="Available Feature" value="feat-1">
    This feature is available.
  </:item>
  <:item title="Premium Feature" value="feat-2" disabled>
    Coming soon.
  </:item>
</.accordion>

<.accordion>
  <:item title="How do I create an account?" value="q1">
    Click "Sign Up" and follow the registration process.
  </:item>
  <:item title="Can I change my username?" value="q2">
    Yes, from Settings → Profile → Edit Username.
  </:item>
  <:item title="How do I reset my password?" value="q3">
    Click "Forgot Password" on the login page.
  </:item>
</.accordion>