#### Codex 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).
* [[ https://www.figma.com/file/mn4bJHD74ks7DIcLlgLyFq/Tab-component---T303321?node-id=906%3A5544 | Figma documentation ]]
* Prior Art: [[ https://www.mediawiki.org/wiki/OOUI/Index_and_TabPanels | OOUI IndexLayout and TabPanel layout ]]
#### Screenshots (from Figma)
Framed layout
{F35005521}
Unframed layout
{F35005520}
#### Design Notes
* Does this component need to have a "disabled" state specified? This may be necessary to cover Abstract Wikipedia's use case.
#### Implementation Notes
* Implementation-wise this component will likely consist of two components which muse be used together: a parent `<Tabs>` component and child `<Tab>` component. In isolation, single components should probably be invalid and not usable. Both components will use Vue's [[ https://vuejs.org/guide/components/slots.html | slot ]] feature to allow for content distribution.
* Several early Vue products (MediaSearch, current Wikilambda UI, Suggested Tags aka MachineVision) use a version of this component that is not Vue 3 compatible (it uses the deprecated `$children` instance property). So developing a Vue 3-compatible Codex version may be a requirement for full migration.
* Which style should be considered the default? Frameless or framed?
#### To do
**Design**
- [-] Finalize Figma design for this component (include disabled states for both styles if necessary)
- [] Publish changes in our Figma library
**Code**
- [x] Implement Vue 3 compatible version of Tab and Tabs components
- [] Design review of implementation against Figma specs
- [] QA and accessibility testing
- [] Inclusion in Codex release