StellarUI

<stellar-tab-list>

Tabs controller with roving focus, linked panels, and edge placement variants.

Properties

Component

Example

Preview

Overview

Details

Activity

A compact overview tab with the launch summary and current health.

Detailed rollout notes, linked resources, and the next review checkpoint.

Recent deploy activity, acknowledgements, and the last successful sync.

Active panel: overview

Markup

Copy

<stellar-tab-list label="Select a section">
  <stellar-tab panel="overview">Overview</stellar-tab>
  <stellar-tab panel="details">Details</stellar-tab>
  <stellar-tab panel="activity">Activity</stellar-tab>
  <stellar-tab-panel name="overview">Overview content</stellar-tab-panel>
  <stellar-tab-panel name="details">Details content</stellar-tab-panel>
  <stellar-tab-panel name="activity">Activity content</stellar-tab-panel>
</stellar-tab-list>

API

Complete props, events, slots, and implementation notes for the shipped tab-list.

Props

Prop	Type	Default	Notes
`label`	`string`	`''`	Visible field label for the tab list surface and the accessible name used for the underlying tablist.
`description`	`string`	`''`	Optional supdocs copy shown beneath the label, following the same field shell pattern as other grouped controls.
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`primary`	Controls the active tab accent and the linked panel divider tone.
`tab`	`string`	`first enabled tab`	The active panel name. Setting it programmatically selects the matching enabled tab.
`placement`	`top \| bottom \| start \| end`	`top`	Moves the tab strip to the requested edge and switches keyboard orientation for start/end layouts.

Events

Event	Source	Notes
`tab-shown`	`stellar-tab-list`	Emitted after a panel becomes visible. `event.detail.tab` and `event.detail.panel` reference the active pair.
`tab-hidden`	`stellar-tab-list`	Emitted after a previously visible panel is hidden.

Slots

Slot	Notes
`tab`	One or more `stellar-tab` children. Tabs assign themselves into this slot automatically, so authored markup can omit `slot="tab"`.
default	One or more `stellar-tab-panel` children. Each panel needs a unique `name` that matches a tab `panel` value.

Notes

`stellar-tab-list` owns the whole interaction model: active tab state, roving focus, linked panel visibility, and `tab-shown` or `tab-hidden` events.
Each `stellar-tab` needs a `panel` value that matches a `stellar-tab-panel` `name` inside the same host.
The docs preview round-trips the mutable `tab` prop back into the page signal, so clicking tabs and changing the active-tab control stay in sync.
Like the other grouped controls in StellarUI, `label` and `description` render as visible field metadata instead of staying screen-reader-only.
`tone` lives on `stellar-tab-list`, not on individual `stellar-tab` children. The controller provides the shared active accent and divider color for the whole set.
Top and bottom placements scroll horizontally when needed; start and end placements switch to vertical keyboard navigation automatically.