Tabs

Tabbed interface with automatic or manual activation. Supports nested tabs without conflicts.

Usage

<w-tabs value="tab1">
  <w-slot list>
    <div>
      <w-slot tab name="tab1"><button>Tab 1</button></w-slot>
      <w-slot tab name="tab2"><button>Tab 2</button></w-slot>
      <w-slot tab name="tab3"><button>Tab 3</button></w-slot>
    </div>
  </w-slot>

  <w-slot panels>
    <div>
      <w-slot panel name="tab1"><div>Content for Tab 1</div></w-slot>
      <w-slot panel name="tab2"><div>Content for Tab 2</div></w-slot>
      <w-slot panel name="tab3"><div>Content for Tab 3</div></w-slot>
    </div>
  </w-slot>
</w-tabs>

Props

Prop	Type	Default	Description
value	string	""	Currently selected tab name
orientation	"horizontal" | "vertical"	"horizontal"	Tab list orientation
activation	"automatic" | "manual"	"automatic"	When tabs activate

Slots

Slot	Element	Description
list	Container	Wrapper for tab buttons (becomes tablist)
tab	Button	Tab button inside w-slot[list] (requires name attribute)
panels	Container	Wrapper for all tab panels
panel	Any	Tab panel content inside w-slot[panels] (requires matching name)

Events

Event	Detail	Description
change	{ value }	Fired when selected tab changes

Methods

Method	Description
selectTab(name)	Select a tab by name
getSelectedTab()	Get the currently selected tab name

Keyboard

Key	Action
ArrowRight	Focus next tab (horizontal)
ArrowLeft	Focus previous tab (horizontal)
ArrowDown	Focus next tab (vertical)
ArrowUp	Focus previous tab (vertical)
Home	Focus first tab
End	Focus last tab
Enter / Space	Activate focused tab (manual mode)

Examples

Vertical Tabs

<w-tabs orientation="vertical" value="settings">
  <w-slot list>
    <div>
      <w-slot tab name="profile"><button>Profile</button></w-slot>
      <w-slot tab name="settings"><button>Settings</button></w-slot>
      <w-slot tab name="notifications"><button>Notifications</button></w-slot>
    </div>
  </w-slot>

  <w-slot panels>
    <div>
      <w-slot panel name="profile"><div>Profile settings...</div></w-slot>
      <w-slot panel name="settings"><div>General settings...</div></w-slot>
      <w-slot panel name="notifications"><div>Notification preferences...</div></w-slot>
    </div>
  </w-slot>
</w-tabs>

Manual Activation

Focus moves but tab doesn't activate until Enter/Space:

<w-tabs activation="manual" value="tab1">
  <w-slot list>
    <div>
      <w-slot tab name="tab1"><button>Tab 1</button></w-slot>
      <w-slot tab name="tab2"><button>Tab 2</button></w-slot>
    </div>
  </w-slot>
  <w-slot panels>
    <div>
      <w-slot panel name="tab1"><div>Content 1</div></w-slot>
      <w-slot panel name="tab2"><div>Content 2</div></w-slot>
    </div>
  </w-slot>
</w-tabs>

Nested Tabs

Tabs can be nested without conflicts. Each w-tabs component only manages the tabs and panels within its own w-slot[list] and w-slot[panels] containers:

<w-tabs value="outer1">
  <w-slot list>
    <div>
      <w-slot tab name="outer1"><button>Outer 1</button></w-slot>
      <w-slot tab name="outer2"><button>Outer 2</button></w-slot>
    </div>
  </w-slot>

  <w-slot panels>
    <div>
      <w-slot panel name="outer1">
        <div>
          <!-- Nested tabs work independently -->
          <w-tabs value="inner1">
            <w-slot list>
              <div>
                <w-slot tab name="inner1"><button>Inner A</button></w-slot>
                <w-slot tab name="inner2"><button>Inner B</button></w-slot>
              </div>
            </w-slot>
            <w-slot panels>
              <div>
                <w-slot panel name="inner1"><div>Inner content A</div></w-slot>
                <w-slot panel name="inner2"><div>Inner content B</div></w-slot>
              </div>
            </w-slot>
          </w-tabs>
        </div>
      </w-slot>
      <w-slot panel name="outer2"><div>Outer content 2</div></w-slot>
    </div>
  </w-slot>
</w-tabs>

Accessibility

• Tab container has role="tablist" with aria-orientation
• Tabs have role="tab" with aria-selected
• Panels have role="tabpanel" with aria-labelledby
• aria-controls links tabs to their panels
• Roving tabindex for keyboard navigation