1  <script lang="ts">
 2      import ChevronDown from '~/sf-symbols/chevron.down.svg';
 3  </script>
 4  
 5  <details>
 6      <summary>
 7          <slot name="summary" />
 8          <ChevronDown />
 9      </summary>
10  
11      <slot />
12  </details>
13  
14  <style>
15      details[open] summary {
16          display: none;
17      }
18  
19      summary {
20          list-style: none;
21          cursor: pointer;
22      }
23  
24      summary::-webkit-details-marker {
25          display: none;
26      }
27  
28      summary :global(svg) {
29          overflow: visible;
30          width: 14px;
31          fill: var(--systemTertiary);
32          position: relative;
33          top: 3px;
34          left: 2px;
35      }
36  </style>