Holo Tabs, Tab & Tab Panel

<holo-tabs> manages a tablist of <holo-tab> children (slotted via slot="tab") and a set of <holo-tab-panel> children. It provides roving-tabindex keyboard navigation (Arrow keys, Home, End) and, by default, automatically activates a tab as soon as it receives focus.

When to use

Use it for:

Switching between peer panels of related content on one page, where only one is shown at a time: “Overview”, “Activity”, “Settings”.
Content where users need to compare or revisit sections without leaving the page.

Don’t use it for:

Navigating to different pages. Use Links.
Sequential steps that must be done in order. Build a stepper.
Several sections that may be open together. Use Accordion.

Live Previews

Default (automatic activation)

Account

Security

Billing

Manage your account details here.

Manage your security settings here.

Manage your billing details here.

<holo-tabs label="Settings" value="account">
  <holo-tab slot="tab" panel="account">Account</holo-tab>
  <holo-tab slot="tab" panel="security">Security</holo-tab>
  <holo-tab-panel name="account">Manage your account details here.</holo-tab-panel>
  <holo-tab-panel name="security">Manage your security settings here.</holo-tab-panel>
</holo-tabs>

Disabled tab

Account

Security

Manage your account details here.

Manage your security settings here.

<holo-tabs label="Settings" value="account">
  <holo-tab slot="tab" panel="account">Account</holo-tab>
  <holo-tab slot="tab" panel="security" disabled>Security</holo-tab>
  <holo-tab-panel name="account">Manage your account details here.</holo-tab-panel>
  <holo-tab-panel name="security">Manage your security settings here.</holo-tab-panel>
</holo-tabs>

Accessibility

<holo-tabs> renders a role="tablist" (named by label) around the tab slot. Each <holo-tab> sets role="tab", aria-selected, aria-controls and an id, and takes aria-disabled when disabled. Each <holo-tab-panel> sets role="tabpanel", aria-labelledby pointing to its tab, hidden when inactive, and tabindex="0" when active.

Key	Action
`Tab`	Moves focus into the tab list (to the selected tab), then to the active panel
`ArrowRight`	Moves focus to the next enabled tab (wraps)
`ArrowLeft`	Moves focus to the previous enabled tab (wraps)
`Home`	Moves focus to the first enabled tab
`End`	Moves focus to the last enabled tab
`Enter`, `Space`	Activates the focused tab (needed in `manual` mode)

With activation="automatic" (the default), moving focus also selects the tab. With activation="manual", focus moves first and Enter or Space selects.
Tabs use roving tabindex: only the selected tab is a tab stop. Disabled tabs are skipped.
ArrowUp and ArrowDown are not handled.
The active panel is focusable (tabindex="0") and shows a focus ring with :focus-visible.

You provide:

A label that names the tab list.
Matching panel (on the tab) and name (on the panel) values for every tab.
Short, distinct tab text.

API Reference

`holo-tabs`

Importing

import '@philbob-sideprojects/hololink-ui/holo-tabs';

Properties

Property	Attribute	Type	Default	Description
`activation`	`activation`	`"automatic" \| "manual"`	`'automatic'`	"automatic" selects a tab as soon as it receives focus via arrow keys; "manual" requires Enter/Space to activate the focused tab.
`label`	`label`	`string`	—	The accessible label describing the tablist. Required unless the tablist is labelled by some other visible heading.
`value`	`value`	`string`	—	The panel value of the currently selected holo-tab. Defaults to the first enabled tab's panel value.

Events

Event	Detail	Description
`holoTabChange`	`HoloTabChangeDetail`	Emitted when the user selects a different tab. `detail` is `{ value: string; index: number }`: the tab's `panel` value and its index among the enabled tabs.

Slots

Slot	Description
(default)	The `holo-tab-panel` elements.
`tab`	The `holo-tab` elements, rendered inside the tablist.

CSS custom properties

Property	Description
`--holo-tabs-border-color`	Color of the border below the tablist.
`--holo-tabs-gap`	Space between tabs in the tablist.

`holo-tab`

Importing

import '@philbob-sideprojects/hololink-ui/holo-tab';

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	If true, this tab is disabled and skipped during keyboard navigation.
`panel` (required)	`panel`	`string`	—	The value of the holo-tab-panel this tab controls.
`selected`	`selected`	`boolean`	`false`	Whether this tab is the active/selected tab. Managed by the parent holo-tabs — do not set directly in application code.

Events

Event	Detail	Description
`holoTabActivate`	`string`	Emitted (bubbles + composed) when the user activates this tab, so the owning holo-tabs can update the selected value.

Slots

Slot	Description
(default)	The tab's visible label.

CSS custom properties

Property	Description
`--holo-tab-hover-text-color`	Text color of a tab on hover.
`--holo-tab-selected-text-color`	Text color of the selected tab.
`--holo-tab-text-color`	Text color of an unselected tab.

`holo-tab-panel`

Importing

import '@philbob-sideprojects/hololink-ui/holo-tab-panel';

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this panel is the active/visible panel. Managed by the parent holo-tabs — do not set directly in application code.
`name` (required)	`name`	`string`	—	The value matching the holo-tab that controls this panel.

Slots

Slot	Description
(default)	The panel content.

CSS custom properties

Property	Description
`--holo-tab-panel-padding`	Vertical padding of the panel.