#### Codex Tabs and Tab (Tabbed layout) component
A layout for arbitrary content consisting of multiple panels (only one of which is visible at a given time) and a horizontal row of labels for navigation. This is a common pattern and it is used widely across Wikimedia products.
Ideally the Codex version of this component should blend in seamlessly with prior implementations (#OOUI, etc), featuring only user-experience improvements as changes.
* [[ https://www.figma.com/file/mn4bJHD74ks7DIcLlgLyFq/Tab-component---T303321?node-id=906%3A5544 | Figma design specification ]]
* Prior Art: [[ https://www.mediawiki.org/wiki/OOUI/Index_and_TabPanels | OOUI IndexLayout and TabPanel layout ]]
#### Screenshots (from Figma)
Framed layout
{F35005521}
Frameless layout
{F35005520}
#### To do
**Design**
- [-] Finalize Figma design for this component (include disabled states for both styles if necessary)
- [] Publish changes in our Figma library
**UX**
- Ensure scrolling behaviour meets expectations.
**Code**
- [x] Implement Vue 3 compatible version of Tabs and Tab components
**Design Review** (see https://phabricator.wikimedia.org/T303321#7834644 for more details)
- [-] Fix Tabs hover styles in Chrome ([[ https://gerrit.wikimedia.org/r/c/design/codex/+/778323 | patch ]]; [[ https://778323--wikimedia-codex.netlify.app/components/tabs.html | live demo ]])
- [-] Adjust Tabs header spacing to match Figma specs ([[ https://gerrit.wikimedia.org/r/c/design/codex/+/778356 | patch ]], [[ https://778356--wikimedia-codex.netlify.app/components/tabs.html | live demo ]])
- [-] Ensure both framed and frameless outline styles use rounded corners (top left and top right corners only) ([[ https://gerrit.wikimedia.org/r/c/design/codex/+/778356 | patch ]], [[ https://778356--wikimedia-codex.netlify.app/components/tabs.html | live demo ]])
- [-] Separation between tabs should be 4px in both normal and framed tabs ([[ https://gerrit.wikimedia.org/r/c/design/codex/+/778356 | patch ]], [[ https://778356--wikimedia-codex.netlify.app/components/tabs.html | live demo ]])
- [x] Limit gradient-indicator width to 24px
- [] Fix 1px of separation between tabs and gray line in Safari
**QA & Release**
- [] QA and accessibility testing
- [] Inclusion in Codex release