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:

select the first enabled tab
manage keyboard navigation
show the associated panel

Attributes

Attribute	Type	Default	Description
`value`	string	—	Controlled selected tab
`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	Current selected tab value

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 when the selected tab changes.

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

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>

FilesExpand file tree

x-tabs.md

Latest commit

History