Add separated flag

exampleSite/content/docs/shortcodes/index.md

@@ -103,7 +103,8 @@ The alert sign (`+` or `-`) is optional to control whether the admonition is fol
 <!-- prettier-ignore-start -->
 | Parameter | Description                                                                                       |
 | --------- | ------------------------------------------------------------------------------------------------- |
-| `mode`    | **Optional.** `collapse` (single open) or `open` (multiple open). Defaults to `collapse`.         |
+| `mode`       | **Optional.** `collapse` (single open) or `open` (multiple open). Defaults to `collapse`.      |
+| `separated`  | **Optional.** `true` to show each item as a separate card. Defaults to `false` (joined list).  |
 <!-- prettier-ignore-end -->
 
 `accordionItem` parameters:
@@ -116,10 +117,10 @@ The alert sign (`+` or `-`) is optional to control whether the admonition is fol
 | `header`  | **Optional.** Alias for `title`, kept for compatibility with other shortcodes.                      |
 <!-- prettier-ignore-end -->
 
-**Example 1: `mode="open"` (multiple items can be open)**
+**Example 1: `mode="open"` (multiple items can be open) + `separated=true`**
 
 ```md
-{{</* accordion mode="open" */>}}
+{{</* accordion mode="open" separated=true */>}}
   {{</* accordionItem title="What is Blowfish?" open=true */>}}
   Blowfish is a fast, configurable Hugo theme.
   {{</* /accordionItem */>}}
@@ -130,7 +131,7 @@ The alert sign (`+` or `-`) is optional to control whether the admonition is fol
 {{</* /accordion */>}}
 ```
 
-{{< accordion mode="open" >}}
+{{< accordion mode="open" separated=true >}}
   {{< accordionItem title="What is Blowfish?" open=true >}}
   Blowfish is a fast, configurable Hugo theme.
   {{< /accordionItem >}}

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>