From aed6e577b5f1d9075bed072cd35940cc33f63b17 Mon Sep 17 00:00:00 2001
From: Cameron Dutro <camertron@gmail.com>
Date: Tue, 18 Jun 2024 15:11:59 -0700
Subject: [PATCH 1/2] Ensure tabs are available before selecting

---
 src/tab-container-element.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
index ebccbd9..fef1e24 100644
--- a/src/tab-container-element.ts
+++ b/src/tab-container-element.ts
@@ -109,7 +109,7 @@ export class TabContainerElement extends HTMLElement {
 
   static observedAttributes = ['vertical']
 
-  get #tabList() {
+  get #tabList(): HTMLElement {
     const wrapper = this.querySelector('[slot=tablist-wrapper]')
     if (wrapper?.closest(this.tagName) === this) {
       return wrapper.querySelector('[role=tablist]') as HTMLElement
@@ -220,8 +220,20 @@ export class TabContainerElement extends HTMLElement {
     this.addEventListener('keydown', this)
     this.addEventListener('click', this)
 
-    this.selectTab(-1)
-    this.#setupComplete = true
+    if (this.#tabs.length > 0) {
+      this.selectTab(-1)
+      this.#setupComplete = true
+    } else {
+      const mutationObserver = new MutationObserver(() => {
+        if (this.#tabs.length > 0) {
+          this.selectTab(-1)
+          this.#setupComplete = true
+          mutationObserver.disconnect()
+        }
+      })
+
+      mutationObserver.observe(this, {childList: true, subtree: true})
+    }
   }
 
   attributeChangedCallback(name: string) {
@@ -356,7 +368,7 @@ export class TabContainerElement extends HTMLElement {
      * Out of bounds index
      */
     if (index > tabs.length - 1) {
-      throw new RangeError(`Index "${index}" out of bounds`)
+      return
     }
 
     const selectedTab = tabs[index]

From a947f7d1151201a0eddbc318e9818553758441b1 Mon Sep 17 00:00:00 2001
From: Cameron Dutro <camertron@gmail.com>
Date: Wed, 19 Jun 2024 10:05:56 -0700
Subject: [PATCH 2/2] Attempt to set up until it works

---
 .tool-versions               |  1 +
 custom-elements.json         |  3 +++
 src/tab-container-element.ts | 15 ++++++++-------
 test/test.js                 |  8 +++-----
 4 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 0000000..a5a47f9
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 22.3.0
diff --git a/custom-elements.json b/custom-elements.json
index 8355ce3..5772e8e 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -437,6 +437,9 @@
               "kind": "field",
               "name": "#tabList",
               "privacy": "private",
+              "type": {
+                "text": "HTMLElement"
+              },
               "readonly": true
             },
             {
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
index fef1e24..ea335b7 100644
--- a/src/tab-container-element.ts
+++ b/src/tab-container-element.ts
@@ -220,14 +220,13 @@ export class TabContainerElement extends HTMLElement {
     this.addEventListener('keydown', this)
     this.addEventListener('click', this)
 
-    if (this.#tabs.length > 0) {
-      this.selectTab(-1)
-      this.#setupComplete = true
-    } else {
+    this.selectTab(-1)
+
+    if (!this.#setupComplete) {
       const mutationObserver = new MutationObserver(() => {
-        if (this.#tabs.length > 0) {
-          this.selectTab(-1)
-          this.#setupComplete = true
+        this.selectTab(-1)
+
+        if (this.#setupComplete) {
           mutationObserver.disconnect()
         }
       })
@@ -413,5 +412,7 @@ export class TabContainerElement extends HTMLElement {
         }),
       )
     }
+
+    this.#setupComplete = true
   }
 }
diff --git a/test/test.js b/test/test.js
index a65a03d..27c3059 100644
--- a/test/test.js
+++ b/test/test.js
@@ -339,11 +339,9 @@ describe('tab-container', function () {
     })
 
     it('result in noop, when selectTab receives out of bounds index', function () {
-      assert.throws(() => tabContainer.selectTab(3), 'Index "3" out of bounds')
-
-      tabContainer.selectTab(2)
-      assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
-      assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
+      tabContainer.selectTab(3)
+      assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
+      assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
     })
   })