> ## Documentation Index
> Fetch the complete documentation index at: https://invoca-5bd45748-mintlify-17ed87db.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> Divergences, open decisions, and undocumented gaps for Tabs.

See [Tabs](/invoca-design-system/components/navigation/tabs) for the decided part of this page.

## Known issues

| ID                                                                                | Kind          | What                                                                              |
| --------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------- |
| [**TITAN-DIV-14**](/invoca-design-system/foundations/divergences#titan-div-14)    | Divergence    | `TabPanel` names a tab nothing produces, with ids that collide between bars       |
| [**TITAN-DIV-15**](/invoca-design-system/foundations/divergences#titan-div-15)    | Divergence    | `TabPanel` wraps its children in a text element and unmounts the inactive section |
| [**TITAN-DIV-16**](/invoca-design-system/foundations/divergences#titan-div-16)    | Divergence    | The header has no tab-bar slot, so a tabbed page composes one outside it          |
| [**TITAN-GAP-29**](/invoca-design-system/foundations/open-decisions#titan-gap-29) | Open decision | The vertical orientation is a navigation rail with no region and no archetype     |
| [**TITAN-GAP-30**](/invoca-design-system/foundations/open-decisions#titan-gap-30) | Open decision | A tab can show an error in design and cannot in code                              |

## Gaps in the current rules

* **No maximum tab count.** The design library publishes slots for nine and the page templates
  show five. Neither is a limit, and nothing says at what count a bar should have been a rail or a
  set of pages.
* **No stated default distribution.** Natural width, `fullWidth`, and `centered` all ship with
  demos. Nothing says which a page should use, or what makes `fullWidth` right.
* **Hover and pressed are designed and not themed.** The design library added both for
  consistency with other components and flagged them for review on the code side; the code themes
  neither for a horizontal tab. Recorded in
  [TITAN-GAP-30](/invoca-design-system/foundations/open-decisions#titan-gap-30) so the note survives the file.
* **Whether a tab may carry a count or a chip is unstated.** A rail row can carry a trailing
  accessory, which is how a status chip ends up on one. Nothing says whether a horizontal tab may.
* **`wrapped` has no rule.** A label may wrap to a second line, which makes the bar taller.
  Nothing states when that is acceptable rather than a signal to shorten the label.

## Constraints Titan should enforce

These are real, currently-true rules. Nothing in code stops a builder from violating them today —
each is a placeholder for a guardrail Titan hasn't built, not a decision still being made.

| ID               | Constraint                                                     | Would be enforced by                                                                   |
| ---------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| **TITAN-TAB-02** | Exactly one tab is selected in a page's tab bar.               | A discriminated `variant="page"` prop requiring a non-`false` `value`, or a lint rule. |
| **TITAN-TAB-03** | Every tab has a panel, with ids referencing each other.        | A lint/test asserting Tab↔TabPanel id linkage.                                         |
| **TITAN-TAB-05** | A disabled tab is paired with a reachable explanation.         | A required-when-disabled explanation prop.                                             |
| **TITAN-TAB-06** | An overflowing bar uses `scrollButtons="auto"`, never `false`. | A lint rule flagging `scrollButtons={false}`.                                          |
| **TITAN-TAB-08** | An icon-only tab carries an explicit accessible name.          | A required accessible-name prop; a11y lint.                                            |