From 5260f36a1b693abca54be5c8ae319bcf5b3fc0b9 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:17:03 +0000
Subject: [PATCH] add more examples to examples page

---
 examples/index.html | 56 +++++++++++++++++++++++++++++++++++++++++----
 examples/tabs.css   | 20 ++++++++++++----
 2 files changed, 68 insertions(+), 8 deletions(-)
diff --git a/examples/index.html b/examples/index.html
index 5fd314d..1201944 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -6,11 +6,58 @@
   <link rel="stylesheet" href="tabs.css" />
 </head>
 <body>
+  <h1>Tab Container Examples</h1>
+  
+  <h2>Horizontal</h2>
+
+  <tab-container>
+    <div role="tablist" aria-label="Horizontal Tabs Example">
+      <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>
+    <div role="tabpanel" aria-labelledby="tab-one">
+      Panel 1
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-two" hidden>
+      Panel 2
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-three" hidden>
+      Panel 3
+    </div>
+  </tab-container>
+
+  <h2>Vertical</h2>
+
+  <tab-container>
+    <div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
+      <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>
+    <div role="tabpanel" aria-labelledby="tab-one">
+      Panel 1
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-two" hidden>
+      Panel 2
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-three" hidden>
+      Panel 3
+    </div>
+  </tab-container>
+
+  <h2>Panel with extra buttons</h2>
+
   <tab-container>
-    <div role="tablist">
-      <button type="button" id="tab-one" role="tab" tabindex="0" aria-selected="true">Tab one</button>
-      <button type="button" id="tab-two" role="tab" tabindex="-1">Tab two</button>
-      <button type="button" id="tab-three" role="tab" tabindex="-1">Tab three</button>
+    <div style="display: flex">
+      <button>Left button, not a tab!</button>
+      <button>2nd Left button, not a tab!</button>
+      <div role="tablist" aria-label="Tabs Example with extra buttons">
+        <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>
+      <button>Right button, not a tab!</button>
     </div>
     <div role="tabpanel" aria-labelledby="tab-one">
       Panel 1
@@ -21,6 +68,7 @@
     <div role="tabpanel" aria-labelledby="tab-three" hidden>
       Panel 3
     </div>
+    <p>This comes after the panels</p>
   </tab-container>
 
   <!-- <script src="../dist/index.js" type="module"></script> -->
diff --git a/examples/tabs.css b/examples/tabs.css
index 5289590..6e95f33 100644
--- a/examples/tabs.css
+++ b/examples/tabs.css
@@ -1,8 +1,20 @@
-/* Borrowed from https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html */
+/* Borrowed (and modified) from https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html */
 
-[role="tablist"] {
-  margin: 0 0 -.1em;
-  overflow: visible;
+tab-container {
+  width: 100%;
+  margin: 2rem 0;
+}
+
+tab-container>[role="tablist"][aria-orientation="vertical"] {
+  display: flex;
+  flex-direction: column;
+}
+tab-container:has([aria-orientation="vertical"]) {
+  display: flex;
+  flex-direction: row;
+}
+tab-container:has([aria-orientation="vertical"]) [role="tabpanel"] {
+  flex: 1;
 }
 
 [role="tab"] {
