x-tabs

Overview

x-tabs is a tab system container that coordinates multiple x-tab triggers and their associated tab panels.

It manages:

• selected tab state
• keyboard navigation
• roving tabindex
• panel visibility
• tab selection events

x-tabs complements x-tab and provides the coordination layer for a full tab interface.

---

Installation

import { init } from "@vanelsas/baredom/x-tabs";

init();

---

Basic Usage

<x-tabs>
  <x-tab value="overview" controls="panel-overview">Overview</x-tab>
  <x-tab value="analytics" controls="panel-analytics">Analytics</x-tab>
  <x-tab value="reports" controls="panel-reports">Reports</x-tab>
</x-tabs>

<section id="panel-overview">Overview content</section>
<section id="panel-analytics" hidden>Analytics content</section>
<section id="panel-reports" hidden>Reports content</section>

x-tabs will automatically:

• show the tab that value names, or else the first enabled tab marked selected, or else the first enabled tab
• manage keyboard navigation
• show the associated panel

---

Attributes

Attribute	Type	Default	Description
value	string	—	The selected tab. x-tabs writes it only after an accepted value-change-request
orientation	horizontal	vertical	horizontal
activation	auto	manual	auto
label	string	—	Accessible label
loop	boolean	false	Enables keyboard wrap navigation

---

Properties

Property	Type	Description
value	string	Reflects value. null until the page sets it or a request is accepted
orientation	string	Reflects orientation, default "horizontal"
activation	string	Reflects activation, default "auto"
label	string	Reflects label, default ""
loop	boolean	Reflects loop

Example:

tabs.value = "analytics";

---

Events

value-change-request

Fired before the selected tab changes. Cancelable — call event.preventDefault() to block the tab switch (controlled mode).

tabs.addEventListener("value-change-request", event => {
  console.log(event.detail.value);         // proposed new tab
  console.log(event.detail.previousValue); // current tab
  event.preventDefault(); // block the switch
});

Event detail:

{
  value: string,
  previousValue: string
}

value-change

Fired after an accepted value-change-request. A move of the shown tab without value (a tab removed or disabled) sends none.

tabs.addEventListener("value-change", event => {
  console.log(event.detail.value);
});

Event detail:

{
  value: string
}

---

Keyboard Navigation

Keyboard behavior follows the WAI-ARIA tab pattern.

Horizontal

Key	Action
ArrowRight	Next tab
ArrowLeft	Previous tab

Vertical

Key	Action
ArrowDown	Next tab
ArrowUp	Previous tab

Global

Key	Action
Home	First enabled tab
End	Last enabled tab

---

Activation Modes

auto

Selecting a tab occurs immediately during keyboard navigation.

manual

Arrow keys move focus only. Selection occurs when pressing:

• Enter
• Space

---

Disabled Tabs

Disabled tabs:

• cannot be selected
• are skipped during keyboard navigation

---

Panel Coordination

Panels are associated using the controls attribute on x-tab.

Example:

<x-tab value="analytics" controls="panel-analytics">

The container will automatically:

• show the panel for the selected tab
• hide other panels using the hidden attribute

---

Writes on Other Nodes

Node	Attribute	When
each x-tab child	selected	the selection or the tabs change
the panel a tab names in controls	hidden	the selection or the tabs change

x-tabs owns these. With a value, it marks the tab that value names and replaces any other mark. Without a value, the marks hold the selection: x-tabs keeps one enabled tab marked, the first marked one or else the first one. So the selection moves when that tab is removed or disabled, and stays where it moved. Set value to pin it.

---

Styling

x-tabs is intentionally lightweight.

Most visual styling is handled by x-tab.

CSS Custom Properties

--x-tabs-gap

---

Parts

Part	Description
base	Internal container

---

Accessibility

x-tabs coordinates the tablist pattern.

Element	Role
internal base	tablist
x-tab	tab
associated panels	tabpanel (user supplied)

The component:

• preserves DOM reading order
• does not override semantics of slotted content
• applies ARIA coordination only where necessary

---

Motion

x-tabs introduces minimal or no motion. Any transitions respect:

prefers-reduced-motion

---

Example

<x-tabs activation="auto">
  <x-tab value="overview" controls="p1">Overview</x-tab>
  <x-tab value="analytics" controls="p2">Analytics</x-tab>
  <x-tab value="reports" controls="p3">Reports</x-tab>
</x-tabs>

<section id="p1">Overview content</section>
<section id="p2" hidden>Analytics content</section>
<section id="p3" hidden>Reports content</section>