Accordion Grouped

<sv-accordion class="accordion" group="guide" opened>
  <span slot="summary">Getting Started</span>
3 collapsed lines
  <p class="accordion-content">
    Learn the basics of setting up your project, installing dependencies, and understanding the folder structure.
  </p>
</sv-accordion>

<sv-accordion class="accordion" group="guide">
  <span slot="summary">Configuration</span>
3 collapsed lines
  <p class="accordion-content">
    See how to adjust settings, enable optional features, and customize the component to fit your needs.
  </p>
</sv-accordion>

<sv-accordion class="accordion" group="guide">
  <span slot="summary">Usage</span>
3 collapsed lines
  <p class="accordion-content">
    Explore examples of how to use the component in different scenarios, including common patterns and best practices.
  </p>
</sv-accordion>

<sv-accordion class="accordion" group="guide">
  <span slot="summary">Troubleshooting</span>
3 collapsed lines
  <p class="accordion-content">
    Find solutions to common issues, known limitations, and tips for debugging setup or styling problems.
  </p>
</sv-accordion>

<sv-accordion class="accordion" disabled group="guide">
  <span slot="summary">Advanced Settings</span>
  <p class="accordion-content">This section is currently unavailable. Adjusting advanced options is disabled in this version.</p>
</sv-accordion>

2 collapsed lines
<style>
  .accordion {
    [slot="summary"] {
3 collapsed lines
      color: var(--sb-color-gray-0);
    }

    &:state(--disabled) [slot="summary"] {
2 collapsed lines
      color: unset;
    }

    /* Reset all corners */
    &::part(container) {
2 collapsed lines
      border-radius: 0;
    }

    /* Rounded corners for first accordion in the group */
    &:first-of-type::part(container) {
3 collapsed lines
      border-start-start-radius: var(--sv-bdr-rad-md);
      border-start-end-radius: var(--sv-bdr-rad-md);
    }

    /* Rounded corners for last accordion in the group */
    &:last-of-type::part(container) {
3 collapsed lines
      border-end-start-radius: var(--sv-bdr-rad-md);
      border-end-end-radius: var(--sv-bdr-rad-md);
    }

    /* Only the last accordion has border bottom */
    &:not(:last-of-type)::part(container) {
2 collapsed lines
      border-block-end: none;
    }

4 collapsed lines
    .accordion-content {
      margin-block-start: 0;
    }
  }
</style>