linewisp

Facet Tabs / developer preview

Navigation that
holds its place.

Facet Tabs is a WAI-ARIA browser component for showing a focused part of an application without losing the surrounding context.

Preview statusFacet Tabs is available for browser evaluation with the private @linewisp/wisp-tabs namespace. It is not published to npm yet.

Getting started

Define the component, configure stable IDs, then provide clear labels and text panels. Labels and panels are rendered as text, never interpreted as caller-supplied markup.

import { defineWispTabs } from '@linewisp/wisp-tabs';

defineWispTabs();
document.querySelector('wisp-tabs').configure({
  label: 'Project workspace',
  tabs: [
    { id: 'overview', label: 'Overview', panel: 'Project activity and next actions.' },
    { id: 'files', label: 'Files', panel: 'Files that belong to this project.' },
  ],
});

Choose deliberately

Activation modes

The correct mode depends on whether changing a panel is immediate and inexpensive, or whether people should explicitly confirm their choice.

AutomaticArrow-key focus selects the next tab. This is the default for immediate, locally available panels.
ManualArrow keys move focus only. Enter or Space selects, which avoids unwanted expensive panel work.
OrientationHorizontal uses Left and Right. Vertical uses Up and Down. Home and End always reach boundaries.

Configuration API

OptionTypePurpose
labelrequired stringNames the tab list for assistive technology.
tabsrequired arrayOne to 50 unique IDs with text labels and panels. At least one must be enabled.
selectedIdstringSelects an enabled tab at configuration time.
activation'automatic' | 'manual'Controls whether focus immediately selects a tab.
orientation'horizontal' | 'vertical'Sets the tab-list relationship and arrow-key direction.
theme, densityshared valuesApplies the Facet visual system, including high contrast.

Keyboard behavior

Disabled tabs are skipped. Left or Up moves to the prior enabled tab, Right or Down moves to the next, Home moves to the first, and End to the last. In manual mode Enter and Space commit the focused tab. The selected tab is the roving tab stop, while every panel has the correct tab and panel relationship.

Methods and events

Methods and state

  • selectedTabId provides the current stable ID
  • select(id) selects an enabled tab deliberately
  • focus() moves focus to the selected tab

Events

  • wisp-tab-change fires after a selection change
  • detail.id contains the selected stable ID
  • Repeated selection does not emit a redundant change.

Safety and boundaries

Facet Tabs is intentionally a browser-side navigation primitive. It does not claim closable tabs, remote panel loading, routing, or persistence. Typed React, Vue, and Angular adapters forward the real selection event. The component validates untyped JavaScript configuration before rendering and uses shared theme tokens instead of hard-coded product colors.

Open the framework playground ↗ or open the live Tabs demo ↗.