# XWUIAuctionCard

A single auction-item card: item photo with an optional status pill and a compact "ends in" countdown overlay, the lot `reference` code, a clamped title, the seller identity (composed from XWUIAvatar, with an optional verified tick), the current bid with its bid count, and a quick-bid button. Two shapes via `conf_comp.variant`: `grid` (tall marketplace tile, default) and `compact` (short horizontal row for watchlists and sidebars).

Countdown handling: the card renders its own single-line countdown from `data.endsAt`, or accepts a pre-formatted `data.endsInLabel` and skips the ticker entirely. `basic/XWUICountdownTimer` did not exist when this component was written - `startCountdown()` in `XWUIAuctionCard.ts` is the one seam to swap for a mounted `XWUICountdownTimer` in its compact format.

## Events

Interactions are surfaced twice - as a `data.on*` callback and as a bubbling, composed `CustomEvent` on the container (the convention used by `industry/ecommerce/XWUIPointOfSale`):

| Event | Callback | `detail` |
|---|---|---|
| `xwui-auction-card:view-item` | `onViewItem` | `{ id, reference, title, currentBid }` |
| `xwui-auction-card:quick-bid` | `onQuickBid` | `{ id, reference, title, currentBid }` |

Set `data.viewItemHref` to make the photo and title real links (the event still fires, so consumers can intercept for client-side routing).

## Usage

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

const card = new XWUIAuctionCard(host, {
  id: 'lot-4471',
  reference: 'LOT-4471',
  title: '1968 Aston Martin DB6 Vantage - Matching Numbers',
  imageUrl: '/img/db6.jpg',
  seller: { name: 'Northgate Estates', verified: true },
  currentBid: 412000,
  bidCount: 27,
  endsAt: '2026-09-01T18:00:00Z',
  statusLabel: 'Live',
}, { variant: 'grid', currency: 'USD' });

host.addEventListener('xwui-auction-card:quick-bid', (e) => console.log(e.detail));

// Live bid updates without a rebuild:
card.setCurrentBid(418500, 28);
```

```api
```