From 601bb875595d23e2f480259a668704f9cf0fa6ac Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Fri, 2 Jan 2026 17:29:00 +0800
Subject: [PATCH] feat(tabs): support default tab

---
 layouts/shortcodes/tabs.html | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 3aebcacb..02c790b2 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -2,18 +2,28 @@
 {{- $noop := .Inner -}}
 
 {{- $group := .Get "group" -}}
+{{- $default := .Get "default" -}}
 
 
-<div class="tab__container w-full" {{ with $group }}data-tab-group="{{ . }}"{{ end }}>
+<div
+  class="tab__container w-full"
+  {{ with $group }}data-tab-group="{{ . }}"{{ end }}
+  {{ with $default }}data-default-tab="{{ . }}"{{ end }}>
   <div class="tab__nav" role="tablist">
     <div class="flex gap-1 overflow-x-auto">
       {{- range $nTabs, $_ := .Store.Get "tabs" -}}
+        {{- $isActive := false -}}
+        {{- if $default -}}
+          {{- $isActive = eq $default (index . "label") -}}
+        {{- else -}}
+          {{- $isActive = eq $nTabs 0 -}}
+        {{- end -}}
         <button
-          class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $nTabs 0 }}
+          class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if $isActive -}}
             tab--active
-          {{ end }}"
+          {{- end }}"
           role="tab"
-          aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}"
+          aria-selected="{{ cond $isActive `true` `false` }}"
           data-tab-index="{{ $nTabs }}"
           data-tab-label="{{ index . "label" }}">
           <span class="flex items-center gap-1">
@@ -28,7 +38,13 @@
   </div>
   <div class="tab__content mt-4">
     {{- range $nTabs, $_ := .Store.Get "tabs" -}}
-      <div class="tab__panel {{ if eq $nTabs 0 }}tab--active{{ end }}" data-tab-index="{{ $nTabs }}">
+      {{- $isActive := false -}}
+      {{- if $default -}}
+        {{- $isActive = eq $default (index . "label") -}}
+      {{- else -}}
+        {{- $isActive = eq $nTabs 0 -}}
+      {{- end -}}
+      <div class="tab__panel {{ if $isActive }}tab--active{{ end }}" data-tab-index="{{ $nTabs }}">
         {{ index . "content" }}
       </div>
     {{- end -}}