# XWUITabMenu

A horizontal menu styled as a tab strip, where each tab is a button and one is active at a time. Use it for switching between sections or views. Items are `{ id, label, icon? }`; the active tab is `activeId` (defaults to the first). Choose a `variant` (`default` / `pills` / `underline`), set the selection with `setActiveId()`, and subscribe to changes via `onTabChange(handler)`. It reuses XWUIButton for each tab and exposes `role="tablist"` semantics.

## Usage

```ts
import { XWUITabMenu } from './XWUITabMenu';

const tabs = new XWUITabMenu(
  container,
  {
    items: [
      { id: 'overview', label: 'Overview' },
      { id: 'activity', label: 'Activity' },
      { id: 'settings', label: 'Settings' },
    ],
    activeId: 'overview',
  },
  { variant: 'underline' }
);

tabs.onTabChange((id) => console.log('active tab', id));
```

## Basic Tab Menu

An underline tab strip switching between Overview, Activity, and Settings, with the first tab active.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Tab Menu
description: An underline tab strip switching between Overview, Activity, and Settings, with the first tab active.
```

## Pill Variant

A pills-style tab menu for picking a dashboard date range, with Week pre-selected.

```example
file: examples/PillVariant.ts
html: examples/PillVariant.html
title: Pill Variant
description: A pills-style tab menu for picking a dashboard date range, with Week pre-selected.
```

## Three Variants

The same three tabs rendered as default, pills, and underline so the styles can be compared side by side.

```example
file: examples/ThreeVariants.ts
html: examples/ThreeVariants.html
title: Three Variants
description: The same three tabs rendered as default, pills, and underline so the styles can be compared side by side.
```

```api
```