Ensure tabs are available before selecting

Author: camertron

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]