Tabs

Tabs that show one panel at a time.

Mercury

Venus

Earth

The closest planet to the Sun.

<script>
  import Tab from '@brumate/ui/Tab.brm';
  import TabList from '@brumate/ui/TabList.brm';
  import TabPanel from '@brumate/ui/TabPanel.brm';
  import Tabs from '@brumate/ui/Tabs.brm';
</script>

<Tabs>
  <TabList class="ui-tablist" aria-label="Planets">
    <Tab id="mercury" class="ui-tab">Mercury</Tab>
    <Tab id="venus" class="ui-tab">Venus</Tab>
    <Tab id="earth" class="ui-tab">Earth</Tab>
  </TabList>
  <TabPanel id="mercury" class="ui-tabpanel">The closest planet to the Sun.</TabPanel>
  <TabPanel id="venus" class="ui-tabpanel">The hottest planet, under thick clouds.</TabPanel>
  <TabPanel id="earth" class="ui-tabpanel">The only planet known to hold life.</TabPanel>
</Tabs>

<Tabs selectedKey=$bind(section)>
  <TabList aria-label="Sections">
    <Tab id="intro">Intro</Tab>
    <Tab id="usage">Usage</Tab>
  </TabList>
  <TabPanel id="intro">…</TabPanel>
  <TabPanel id="usage">…</TabPanel>
</Tabs>

Tabs hold a TabList with Tab elements, and a TabPanel for each tab, with the same id.
selectedKey is the key of the selected tab. With none, the first tab is selected. A key that no tab has, or of a disabled tab, selects the first tab that is enabled. It starts its own state, or binds with $bind, and onSelectionChange gets each new key. See State.
disabledKeys, or isDisabled on a Tab, keeps tabs from selection. isDisabled on Tabs disables them all.
The TabList needs aria-label or aria-labelledby.

Keyboard

Tab stops once, at the selected tab, and then moves into its panel.
The arrow keys move to the next and the previous tab, past disabled ones, and go round at the ends. Home and End go to the first and the last tab. Right to left, Left and Right turn around.
keyboardActivation="automatic", the default, selects the tab that the keys move to. "manual" selects it with Enter or Space.
Horizontal tabs use Left and Right, and leave Up and Down to the page. orientation="vertical" uses Up and Down, and Left and Right too, as in React Aria. Tabs and the TabList show data-orientation.

Panels

Only the panel of the selected tab renders its content. Selecting its tab again renders it anew, with new state, as a block does.
shouldForceMount keeps a panel on the page while its tab is not selected, hidden, so it keeps its state.
A panel with no content that takes Tab takes Tab itself, so it can still be reached. A panel with a field or a button in it does not.

Tabs

A Tab shows data-selected, data-disabled, data-pressed, data-hovered, data-focused and data-focus-visible. A press selects it.