From 181fc4adb9ca58dc0ed974e1872f56d713cc2510 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Fri, 8 Mar 2024 14:57:31 +0000
Subject: [PATCH 1/2] Change default-tab to default-tab-index

---
 README.md                    |  4 ++--
 custom-elements.json         | 11 +++++++++++
 examples/index.html          | 19 ++++++++++++++++++-
 src/tab-container-element.ts | 10 +++++++++-
 test/test.js                 |  4 ++--
 5 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 426d338..dcb3214 100644
--- a/README.md
+++ b/README.md
@@ -31,11 +31,11 @@ import '@github/tab-container-element'
 </tab-container>
 ```
 
-If none of the tabs have `aria-selected=true`, then the first tab will be selected automatically. You can also add the `default-tab=N` attribute to avoid having to set `aria-selected=true` on the desired tab, where `N` is the 0-based tab index:
+If none of the tabs have `aria-selected=true`, then the first tab will be selected automatically. You can also add the `default-tab-index=N` attribute to avoid having to set `aria-selected=true` on the desired tab, where `N` is the 0-based tab index:
 
 ```html
 <!-- The _second_ tab will be selected -->
-<tab-container default-tab="1">
+<tab-container default-tab-index="1">
   <button type="button" id="tab-one" role="tab">Tab one</button>
   <button type="button" id="tab-two" role="tab">Tab two</button>
   <button type="button" id="tab-three" role="tab">Tab three</button>
diff --git a/custom-elements.json b/custom-elements.json
index cc4e786..bb7e766 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -196,6 +196,10 @@
               "kind": "field",
               "name": "selectedTabIndex"
             },
+            {
+              "kind": "field",
+              "name": "defaultTabIndex"
+            },
             {
               "kind": "method",
               "name": "selectTab",
@@ -550,6 +554,13 @@
                 "text": "number"
               }
             },
+            {
+              "kind": "field",
+              "name": "defaultTabIndex",
+              "type": {
+                "text": "number"
+              }
+            },
             {
               "kind": "method",
               "name": "selectTab",
diff --git a/examples/index.html b/examples/index.html
index f616f61..4e3553e 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -100,6 +100,23 @@ <h2>Set initially selected tab</h2>
       </div>
     </tab-container>
 
+    <h2>Set default tab</h2>
+
+    <tab-container default-tab-index="1">
+      <button type="button" id="tab-one" role="tab">Tab one</button>
+      <button type="button" id="tab-two" role="tab">Tab two</button>
+      <button type="button" id="tab-three" role="tab">Tab three</button>
+      <div role="tabpanel" aria-labelledby="tab-one" hidden>
+        Panel 1
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-two">
+        Panel 2
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-three" hidden>
+        Panel 3
+      </div>
+    </tab-container>
+
     <h2>Panel with extra buttons</h2>
 
     <tab-container>
@@ -123,7 +140,7 @@ <h2>Panel with extra buttons</h2>
 
   </main>
 
-  <!-- <script src="../dist/index.js" type="module"></script> -->
+  <!--<script src="../dist/index.js" type="module"></script>-->
   <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
 </body>
 </html>
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
index b788a5c..041a592 100644
--- a/src/tab-container-element.ts
+++ b/src/tab-container-element.ts
@@ -254,6 +254,14 @@ export class TabContainerElement extends HTMLElement {
     this.selectTab(i)
   }
 
+  get defaultTabIndex(): number {
+    return Number(this.getAttribute('default-tab-index') || -1)
+  }
+
+  set defaultTabIndex(index: number) {
+    this.setAttribute('default-tab-index', String(index))
+  }
+
   selectTab(index: number): void {
     if (!this.#setupComplete) {
       const tabListSlot = this.#tabListSlot
@@ -310,7 +318,7 @@ export class TabContainerElement extends HTMLElement {
         for (const el of afterTabSlotted) el.setAttribute('slot', 'after-tabs')
         for (const el of afterSlotted) el.setAttribute('slot', 'after-panels')
       }
-      const defaultTab = Number(this.getAttribute('default-tab') || -1)
+      const defaultTab = this.defaultTabIndex
       const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
       index = index >= 0 ? index : Math.max(0, defaultIndex)
     }
diff --git a/test/test.js b/test/test.js
index 4fc3370..ed79f4a 100644
--- a/test/test.js
+++ b/test/test.js
@@ -108,10 +108,10 @@ describe('tab-container', function () {
     })
   })
 
-  describe('after tree insertion with default-tab', function () {
+  describe('after tree insertion with defaulTabIndex', function () {
     beforeEach(function () {
       document.body.innerHTML = `
-      <tab-container default-tab=1>
+      <tab-container defaultTabIndex=1>
         <button type="button" role="tab">Tab one</button>
         <button type="button" role="tab">Tab two</button>
         <button type="button" role="tab">Tab three</button>

From 7a01bd2ab03a6eb90517d8b409413aa2dfeb66b2 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Fri, 8 Mar 2024 15:02:35 +0000
Subject: [PATCH 2/2] Use existing default-tab attribute

---
 README.md                    | 4 ++--
 src/tab-container-element.ts | 4 ++--
 test/test.js                 | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index dcb3214..426d338 100644
--- a/README.md
+++ b/README.md
@@ -31,11 +31,11 @@ import '@github/tab-container-element'
 </tab-container>
 ```
 
-If none of the tabs have `aria-selected=true`, then the first tab will be selected automatically. You can also add the `default-tab-index=N` attribute to avoid having to set `aria-selected=true` on the desired tab, where `N` is the 0-based tab index:
+If none of the tabs have `aria-selected=true`, then the first tab will be selected automatically. You can also add the `default-tab=N` attribute to avoid having to set `aria-selected=true` on the desired tab, where `N` is the 0-based tab index:
 
 ```html
 <!-- The _second_ tab will be selected -->
-<tab-container default-tab-index="1">
+<tab-container default-tab="1">
   <button type="button" id="tab-one" role="tab">Tab one</button>
   <button type="button" id="tab-two" role="tab">Tab two</button>
   <button type="button" id="tab-three" role="tab">Tab three</button>
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
index 041a592..c01164d 100644
--- a/src/tab-container-element.ts
+++ b/src/tab-container-element.ts
@@ -255,11 +255,11 @@ export class TabContainerElement extends HTMLElement {
   }
 
   get defaultTabIndex(): number {
-    return Number(this.getAttribute('default-tab-index') || -1)
+    return Number(this.getAttribute('default-tab') || -1)
   }
 
   set defaultTabIndex(index: number) {
-    this.setAttribute('default-tab-index', String(index))
+    this.setAttribute('default-tab', String(index))
   }
 
   selectTab(index: number): void {
diff --git a/test/test.js b/test/test.js
index ed79f4a..eb0c08f 100644
--- a/test/test.js
+++ b/test/test.js
@@ -111,7 +111,7 @@ describe('tab-container', function () {
   describe('after tree insertion with defaulTabIndex', function () {
     beforeEach(function () {
       document.body.innerHTML = `
-      <tab-container defaultTabIndex=1>
+      <tab-container default-tab="1">
         <button type="button" role="tab">Tab one</button>
         <button type="button" role="tab">Tab two</button>
         <button type="button" role="tab">Tab three</button>