From 6a7692ae3178f9f9f727cc17b8ae860604afd78f Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 9 Aug 2023 00:21:26 +0200
Subject: [PATCH] Fix issue with nested `<Tabs>` components (#473)

---
 .changeset/wise-boats-flow.md                 | 5 +++++
 packages/starlight/user-components/Tabs.astro | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wise-boats-flow.md

diff --git a/.changeset/wise-boats-flow.md b/.changeset/wise-boats-flow.md
new file mode 100644
index 00000000000..6a85edfdd55
--- /dev/null
+++ b/.changeset/wise-boats-flow.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fix issue with nested `<Tabs>` components
diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro
index 43af0430618..82b3af179dd 100644
--- a/packages/starlight/user-components/Tabs.astro
+++ b/packages/starlight/user-components/Tabs.astro
@@ -77,7 +77,7 @@ const { html, panels } = processPanels(panelHtml);
 			super();
 			const tablist = this.querySelector<HTMLUListElement>('[role="tablist"]')!;
 			this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')];
-			this.panels = [...this.querySelectorAll<HTMLElement>('[role="tabpanel"]')];
+			this.panels = [...this.querySelectorAll<HTMLElement>(':scope > [role="tabpanel"]')];
 
 			this.tabs.forEach((tab, i) => {
 				// Handle clicks for mouse users