Add vertical prop

This enables `<tab-container vertical>` for a much more ergonomic way to
create & style tab containers. This also automatically handles the
necessary aria markup for the tablist.

Author: keithamus

src/tab-container-element.ts

@@ -94,6 +94,19 @@ export class TabContainerElement extends HTMLElement {
     )
   }
 
+  get vertical(): boolean {
+    return this.#tabList.getAttribute('aria-orientation') === 'vertical'
+  }
+
+  set vertical(isVertical: boolean) {
+    const tabList = this.#tabList
+    if (tabList && isVertical) {
+      tabList.setAttribute('aria-orientation', 'vertical')
+    } else {
+      tabList.setAttribute('aria-orientation', 'horizontal')
+    }
+  }
+
   #setup = false
   #internals!: ElementInternals | null
   connectedCallback(): void {
@@ -117,6 +130,13 @@ export class TabContainerElement extends HTMLElement {
     this.#setup = true
   }
 
+  attributeChangedCallback(name: string) {
+    if (!this.isConnected || !this.shadowRoot) return
+    if (name === 'vertical') {
+      this.vertical = this.hasAttribute('vertical')
+    }
+  }
+
   handleEvent(event: Event) {
     if (event.type === 'click') return this.#handleClick(event as MouseEvent)
     if (event.type === 'keydown') return this.#handleKeydown(event as KeyboardEvent)
@@ -176,6 +196,9 @@ export class TabContainerElement extends HTMLElement {
         tabList.setAttribute('aria-label', this.getAttribute('aria-label')!)
         this.removeAttribute('aria-label')
       }
+      if (this.vertical) {
+        this.#tabList.setAttribute('aria-orientation', 'vertical')
+      }
     }
 
     const tabs = this.#tabs