From 67f1fd6ed27dfd32a4af91d1551aacf4d6230f3a Mon Sep 17 00:00:00 2001
From: mladenplaninicic <mladenplaninicic@gmail.com>
Date: Tue, 29 Nov 2022 09:35:56 +0100
Subject: [PATCH] fix(bal-tabs): scope bal-tab-items

---
 packages/components/src/components/bal-tabs/bal-tabs.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
index 7f8db70e93..68bb9fc2ea 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.tsx
+++ b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -20,6 +20,7 @@ export class Tabs {
   private mutationO?: MutationObserver
   private timeoutTimer?: NodeJS.Timer
   private accordion: HTMLBalAccordionElement | null = null
+  private tabsId = `bal-tabs-${TabsIds++}`
 
   @State() tabsOptions: BalTabOption[] = []
   @State() lineWidth = 0
@@ -206,7 +207,7 @@ export class Tabs {
   }
 
   private get tabs(): HTMLBalTabItemElement[] {
-    return Array.from(this.el.querySelectorAll('bal-tab-item'))
+    return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`))
   }
 
   private async updateTabs() {
@@ -393,6 +394,7 @@ export class Tabs {
             ></Tabs>
           </div>
           <div
+            id={this.tabsId}
             class={{
               'column': this.interface !== 'meta' && this.interface !== 'navigation',
               'is-full': !isVertical,
@@ -408,3 +410,5 @@ export class Tabs {
     )
   }
 }
+
+let TabsIds = 0