feat(tabs): add optional synchronization

exampleSite/content/docs/guide/shortcodes/tabs.md

@@ -13,6 +13,41 @@ next: /docs/guide/deploy-site
 
 {{< /tabs >}}
 
+### Sync Tabs
+
+Tabs with the same list of `items` can be synchronized. When enabled, selecting a tab updates all other tabs with the same `items` and remembers the selection across pages.
+
+Enable globally in your `hugo.yaml`:
+
+```yaml {filename="hugo.yaml"}
+params:
+  tabs:
+    sync: true
+```
+
+Or enable it for a single page in the front matter:
+
+```yaml {filename="content/docs/my-page.md"}
+---
+title: My Page
+tabsSync: true
+---
+```
+
+With this enabled the following two tab blocks will always display the same selected item:
+
+```markdown
+{{</* tabs items="A,B" */>}}
+  {{</* tab */>}}A content{{</* /tab */>}}
+  {{</* tab */>}}B content{{</* /tab */>}}
+{{</* /tabs */>}}
+
+{{</* tabs items="A,B" */>}}
+  {{</* tab */>}}Second A content{{</* /tab */>}}
+  {{</* tab */>}}Second B content{{</* /tab */>}}
+{{</* /tabs */>}}
+```
+
 ## Usage
 
 ### Default

exampleSite/hugo.yaml

@@ -184,6 +184,9 @@ params:
       # hover | always
       display: hover
 
+  tabs:
+    sync: true
+
   comments:
     enable: false
     type: giscus

layouts/_shortcodes/tabs.html

@@ -1,12 +1,17 @@
 {{- $items := split (.Get "items") "," -}}
 {{- $defaultIndex := int ((.Get "defaultIndex") | default "0") -}}
 
+{{- $enableSync := site.Params.tabs.sync | default false -}}
+{{- with .Page.Params.tabsSync }}
+  {{- $enableSync = . -}}
+{{- end -}}
+
 {{- if not $items -}}
   {{ errorf "no items provided" }}
 {{- end -}}
 
 <div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
-  <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800" data-tab-group="{{ delimit $items "," }}">
+  <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800"{{ if $enableSync }} data-tab-group="{{ delimit $items "," }}"{{ end }}>
     {{- range $i, $item := $items -}}
       <button
         class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"