Navs & Tabs 1.2.2

The <velin-tabs> Web Component builds an accessible tabbed interface with roving tabindex, automatic ARIA wiring, and panel show/hide. Deutsch: Navigation Tabs

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Switch between peer panels in the same view without leaving the page.
You need keyboard-first tabs with role="tablist" / tab / tabpanel.
Prefer slotted tab / panel children over inventing a <velin-tab> element — that tag does not exist.

When not

Do not use tabs for primary site navigation across pages — use Navbar or Bottom navigation.
Do not use tabs for progressive disclosure of long content — prefer Accordion.
Avoid packing unrelated workflows into one tab set; each panel should share the same user goal.

Basic tabs

Place tab triggers in slot="tab" and panels in slot="panel", matched by order. Mark the default with aria-selected="true" (otherwise the first tab is selected).

Home tab content.

Profile tab content.

Settings tab content.

<velin-tabs>
  <button type="button" slot="tab" aria-selected="true">Home</button>
  <button type="button" slot="tab">Profile</button>
  <button type="button" slot="tab">Settings</button>
  <div slot="panel"><p>Home tab content.</p></div>
  <div slot="panel"><p>Profile tab content.</p></div>
  <div slot="panel"><p>Settings tab content.</p></div>
</velin-tabs>

Slots & ARIA

On connect, the component sets role="tab" / role="tabpanel", generates ids when missing, and wires aria-controls / aria-labelledby. Inactive panels receive the hidden attribute. You may also author with role="tab" / role="tabpanel" instead of slots — both selectors are supported.

Slot	Notes
`tab`	Tab buttons (order-matched to panels)
`panel`	Panel content for each tab

CSS parts: tablist, panels.

Keyboard

The tab list uses roving tabindex via the shared focus manager: ← / → move and activate, Home / End jump to first/last.

Events

Event	Detail
`velin-tab-change`	`{ tab }` — the selected tab element

Roles: tablist, tab, tabpanel with selected state via aria-selected.
Only the selected tab is in the tab order (tabindex="0"); others use -1.
Hidden panels leave the accessibility tree via the hidden attribute.
Contract status: pass.