# XWUIAuctionFilterTabs

A row of rounded pill filter tabs, each pairing a label with a compact count badge - "Live Auction 45", "Buy Now 973.5K". The selected pill is filled with `--accent-primary`; the others are outlined and lift on hover. Counts are formatted with `Intl.NumberFormat`'s compact notation (`formatTabCount()`, exported from the view module), or you can pass `countLabel` per tab to bypass formatting entirely.

This is purely a filter **control**: it owns which pill is selected and emits a selection-change event. Actually filtering the collection is the consumer's job.

## Selection and keyboard

`data.activeTabId` sets the initial selection; when it is missing or points at a disabled tab, the first enabled tab is selected instead. The pills form a single tab stop (`role="group"` with `aria-pressed` on each pill, roving `tabindex`), and Arrow Left/Right/Up/Down move the selection along the row, skipping disabled pills and wrapping at the ends.

## Events

| Event | Callback | Subscriber | `detail` |
|---|---|---|---|
| `xwui-auction-filter-tabs:change` | `onTabChange` | `onTabChange(handler)` | `{ tabId, label, count }` |

`setActiveTab(id, silent)` selects programmatically - pass `silent: true` to reflect state that already came from the consumer (router-driven selection) without re-emitting.

## Config highlights

| Field | Purpose |
|---|---|
| `locale` | Compact count formatting locale. Default `'en-US'` |
| `size` | `'md'` (default) or `'sm'` |
| `scrollable` | Keep the row on one line with hidden-scrollbar horizontal scroll instead of wrapping |
| `ariaLabel` | Accessible name for the group. Default `'Filter auctions'` |

## Usage

```ts
import { XWUIAuctionFilterTabs } from '@exonware/xwui/industry';

const tabs = new XWUIAuctionFilterTabs(host, {
  tabs: [
    { id: 'live', label: 'Live Auction', count: 45 },
    { id: 'buy-now', label: 'Buy Now', count: 973500 },
    { id: 'upcoming', label: 'Upcoming', count: 128 },
    { id: 'ended', label: 'Ended', count: 12400 },
  ],
  activeTabId: 'live',
});

tabs.onTabChange(({ id }) => renderResults(applyFilter(id)));
```

```api
```