Add separated flag

layouts/shortcodes/accordion.html

@@ -1,9 +1,26 @@
 {{ $id := delimit (slice "accordion" (partial "functions/uid.html" .)) "-" }}
 {{ $mode := .Get "mode" | default "collapse" }}
+{{ $separated := .Get "separated" | default false }}
+{{ $isSeparated := or (eq $separated true) (eq $separated "true") }}
 
-<div id="{{ $id }}" class="space-y-2" data-accordion="{{ $mode }}">
+<div
+  id="{{ $id }}"
+  class="{{ if $isSeparated }}space-y-2{{ else }}border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden{{ end }}"
+  data-accordion="{{ $mode }}"
+  data-accordion-separated="{{ $isSeparated }}"
+>
   {{- .Inner -}}
 </div>
+{{ if not $isSeparated }}
+<style>
+  #{{ $id }} > details + details {
+    border-top: 1px solid rgb(var(--color-neutral-200));
+  }
+  .dark #{{ $id }} > details + details {
+    border-top-color: rgb(var(--color-neutral-700));
+  }
+</style>
+{{ end }}
 {{ if eq $mode "collapse" }}
 <script>
   (() => {

layouts/shortcodes/accordionItem.html

@@ -1,8 +1,19 @@
+{{ $parent := .Parent }}
+{{ $separated := false }}
+{{ if $parent }}
+  {{ $separated = $parent.Get "separated" | default false }}
+{{ end }}
+{{ $isSeparated := or (eq $separated true) (eq $separated "true") }}
+
 {{ $title := .Get "title" | default (.Get "header") }}
 {{ $open := .Get "open" | default false }}
 {{ $isOpen := or (eq $open true) (eq $open "true") }}
 
-<details class="rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden" data-accordion-item {{ if $isOpen }}open{{ end }}>
+<details
+  class="{{ if $isSeparated }}rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden{{ else }}border-none{{ end }}"
+  data-accordion-item
+  {{ if $isOpen }}open{{ end }}
+>
   <summary class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100">
     <span>{{ $title }}</span>
     <span>