# XWUIAuctionStatsBanner

A gradient hero/welcome banner for the top of an auction dashboard: avatar (composed from XWUIAvatar), a greeting eyebrow, display name and subtitle, an optional trailing action, and a horizontal row of labelled stat pairs below a hairline rule. Every stat label comes from `data.stats`, so the same banner covers a bidder view ("items participated", "total amount bid", "winning pledges", "time spent") and a seller view ("lots consigned", "hammer total", "sell-through") with no code change.

The stats row is a real `<dl>` with `<dt>` emitted before `<dd>` for correct assistive-technology pairing; `flex-direction: column-reverse` flips them visually so the big number reads first.

## Gradient

The background is derived from a single accent token with `color-mix()` - the technique used by `basic/XWUIHero` and `power/XWUISheet` - so the banner re-tints whenever the active accent changes:

```css
background: var(--xwui-auction-stats-banner-bg,
    linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 82%, #000) 0%,
        var(--accent-primary) 46%,
        color-mix(in srgb, var(--accent-primary) 62%, #fff) 100%));
```

`conf_comp.accentGradient` writes `--xwui-auction-stats-banner-bg` on the root, so an override replaces the background without the stylesheet losing ownership of the highlight bloom layered on top.

## Config highlights

| Field | Purpose |
|---|---|
| `accentGradient` | Full `background` override; defaults to the accent-derived gradient above |
| `showAvatar` | Drop the avatar for a text-only hero. Default `true` |
| `density` | `'comfortable'` (default) or `'compact'` for sidebars |
| `dividers` | Vertical rules between stats. Default `true` |

Activating the optional trailing action fires `data.onAction` and a bubbling `xwui-auction-stats-banner:action` event.

## Usage

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

new XWUIAuctionStatsBanner(host, {
  name: 'Amelia Hart',
  subtitle: '@amelia.hart · Gold bidder',
  greeting: 'Welcome back',
  stats: [
    { label: 'Items participated', value: '128' },
    { label: 'Total amount bid', value: '$41.2k' },
    { label: 'Winning pledges', value: '37' },
    { label: 'Time spent', value: '6h 20m' },
  ],
});
```

```api
```