Adds tablist-wrapper shadow part to the element wrapping the upper portion of the component

owenniblock · owenniblock · commit 4bb924bbac30 · 2024-02-20T10:52:57.000Z
diff --git a/README.md b/README.md
@@ -49,6 +49,7 @@ If none of the tabs have `aria-selected=true`, then the first tab will be select
 
 ### Parts
 
+- `::part(tablist-wrapper)` is the wrapper which contains `before-tabs`, `tablist` and `after-tabs`.
 - `::part(tablist)` is the container which wraps all tabs. This element appears in ATs as it is `role=tablist`.
 - `::part(panel)` is the container housing the currently active tabpanel.
 - `::part(before-tabs)` is the container housing any elements that appear before the first `role=tab`. This also can be directly slotted with `slot=before-tabs`. This container lives outside the element with role=tablist to adhere to ARIA guidelines.
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
@@ -130,6 +130,7 @@ export class TabContainerElement extends HTMLElement {
     const shadowRoot = this.shadowRoot || this.attachShadow({mode: 'open', slotAssignment: 'manual'})
     const tabListContainer = document.createElement('div')
     tabListContainer.style.display = 'flex'
+    tabListContainer.setAttribute('part', 'tablist-wrapper')
     const tabListSlot = document.createElement('slot')
     tabListSlot.setAttribute('part', 'tablist')
     const panelSlot = document.createElement('slot')
